Unnecessary useState Type Has Fix

• Playground Link

Description

React's useState is a Hook that lets you add a state variable to your component. The type annotation of useState's generic type argument, for example useState<number>(123), is unnecessary if TypeScript can infer the type of the state variable from the initial value.

We can usually skip annotating if the generic type argument is a single primitive type like number, string or boolean.

Pattern

number

ast-grep -p 'useState<number>($A)' -r 'useState($A)' -l tsx

string

ast-grep -p 'useState<string>($A)' -r 'useState($A)'

boolean

ast-grep -p 'useState<boolean>($A)' -r 'useState($A)'

Example

function Component() {
  const [name, setName] = useState<string>('React')
}

Diff

function Component() {
  const [name, setName] = useState<string>('React') 
  const [name, setName] = useState('React') 
}

Contributed by

Herrington Darkholme