Type useState as Array of Strings in React TypeScript

Type useState as Array of Strings in React TypeScript #

To type the useState hook as an array of strings in React, use the hook's generic, e.g. const [names, setNames] = useState<string[]>([]). The state variable can be initialized to an empty array or an array of strings and will only accept string values.

App.tsx

Copied!
import {useState} from 'react';

const App = () => {
  // 👇️ const names: string[]
  const [names, setNames] = useState<string[]>([]);

  return (
    <div>
      <button onClick={() => setNames(prevNames => [...prevNames, 'Bob'])}>
        Add name
      </button>

      {names.map((element, index) => {
        return (
          <div key={index}>
            <h2>{element}</h2>
          </div>
        );
      })}
    </div>
  );
};

export default App;

We used a generic to type the useState hook correctly while initializing the hook with an empty array.

react usestate string array typescript

Had we not used the generic, e.g. useState<string[]>([]) when typing the hook, the type of the state variable would be never[], in other words, an array that will never contain any elements.

If you pass even a single empty string to the array, TypeScript will be able to infer the type of the state variable.

App.tsx

Copied!
import {useState} from 'react';

const App = () => {
  // 👇️ const names: string[]
  const [names, setNames] = useState(['']);

  return (
    <div>
      <button onClick={() => setNames(prevNames => [...prevNames, 'Bob'])}>
        Add name
      </button>

      {names.map((element, index) => {
        return (
          <div key={index}>
            <h2>{element}</h2>
          </div>
        );
      })}
    </div>
  );
};

export default App;

Notice that we didn't even have to use a generic to type the state variable. TypeScript was able to infer the type based on the provided initial value.

However, it is a best practice to always explicitly type the useState hook, especially when working with arrays and objects.

If we try to add a value of a different type to the state array, we would get a type checking error.

App.tsx

Copied!
import {useState} from 'react';

const App = () => {
  // 👇️ const names: string[]
  const [names, setNames] = useState<string[]>([]);

  // ⛔️ Argument of type '(prevNames: string[]) => (string | number)[]' is not
  // assignable to parameter of type 'SetStateAction<string[]>'.
  setNames(prevNames => [...prevNames, 1000]);

  return (
    <div>
      <button onClick={() => setNames(prevNames => [...prevNames, 'Bob'])}>
        Add name
      </button>

      {names.map((element, index) => {
        return (
          <div key={index}>
            <h2>{element.toUpperCase()}</h2>
          </div>
        );
      })}
    </div>
  );
};

export default App;

The example shows how trying to add a number to a state array that is typed as string[] causes the type checker to error out.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Type useState as Array of Strings in React TypeScript

Type useState as Array of Strings in React TypeScript #

Borislav Hadzhiev