Type is not assignable to type 'never' in React

avatar

Borislav Hadzhiev

Last updated: Mar 16, 2022

banner

Photo from Unsplash

Type is not assignable to type 'never' in React #

The error "Type is not assignable to type 'never'" occurs when we declare an empty state array with the useState hook but don't type the array. To solve the error, use a generic to type the state array, e.g. const [arr, setArr] = useState<string[]>([]).

Here is an example of how the error occurs.

App.tsx
import {useState} from 'react'; function App() { // 👇️ arr is never[] const [arr, setArr] = useState([]); // ⛔️ Error: Type 'number' is not assignable to type 'never'.ts(2322) setArr([1, 2, 3]); return ( <div className="App"> <div>Hello world</div> </div> ); } export default App;

The error was caused because we declared an empty state array without explicitly typing it.

The type of the array is inferred to be never[], in other words, an array that will always be empty, which is not what we want.

To solve the error, use the generic on the useState hook to type the state array.

App.tsx
import {useState} from 'react'; function App() { // 👇️ type the array with the generic const [arr, setArr] = useState<any[]>([]); setArr([1, 2, 3]); return ( <div className="App"> <div>Hello world</div> </div> ); } export default App;

We used the very broad type of any[], which is an array containing elements of any type.

It's always better to be more specific when possible.

App.tsx
import {useState} from 'react'; function App() { // 👇️ array of strings const [strArr, setStrArr] = useState<string[]>([]); // 👇️ an array of objects const [objArr, setObjArr] = useState<{name: string; age: number}[]>([]); setStrArr(['a', 'b', 'c']); setObjArr([{name: 'A', age: 1}]); return ( <div className="App"> <div>Hello world</div> </div> ); } export default App;

The examples above show how to type the state array as an array of strings or an array of objects.

Always make sure to explicitly type empty arrays in React when using TypeScript.

If you get an error message that contains the never type, there's a very good chance that you have forgotten to explicitly type a value and it is inferred to have a type of never.

To debug this, hover over the value to see its type and look for ways to explicitly type it. If you're working with react hooks, there's a very good chance you have to use a generic as we did with the useState hook.

If you are typing a basic TypeScript variable, just separate the variable name and its type with a colon.

App.tsx
function App() { // 👇️ declare array of strings const arr: string[] = []; arr.push('a', 'b', 'c'); return ( <div className="App"> <div>Hello world</div> </div> ); } export default App;

Conclusion #

The error "Type is not assignable to type 'never'" occurs when we declare an empty state array with the useState hook but don't type the array. To solve the error, use a generic to type the state array, e.g. const [arr, setArr] = useState<string[]>([]).

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.