React Hook 'useState' is called in function that is neither a React function component nor a custom React Hook function

avatar

Borislav Hadzhiev

Last updated: Apr 6, 2022

banner

Photo from Unsplash

React Hook 'useState' is called in function that is neither a React function component nor a custom React Hook function #

To solve the error "React Hook 'useState' is called in function that is neither a React function component nor a custom React Hook function", uppercase the first letter of the function name or prefix the function name with use, e.g. useCounter to make it a component or a custom hook.

react hook usestate is called in function that is neither

Here is an example of how the error occurs.

App.js
import React, {useState} from 'react'; // 👇️ Not a component (name starts with lowercase) // Also not a custom hook (name doesn't start with use) function counter() { // ⛔️ React Hook "useState" is called in function "counter" that // is neither a React function component nor a custom React Hook function. // React component names must start with an uppercase letter. // React Hook names must start with the word "use" const [count, setCount] = useState(0); return ( <div> <h2>Count: {count}</h2> <button onClick={() => setCount(count + 1)}>Increment</button> </div> ); }

The issue in the code sample above is that we are using the useState hook inside of a function that isn't a component because it starts with a lowercase letter and isn't a custom hook, because its name doesn't start with use.

If you meant to declare a component, uppercase the first letter of your function.

App.js
import React, {useState} from 'react'; // 👇️ is now a component (name starts with uppercase letter) function Counter() { const [count, setCount] = useState(0); return ( <div> <h2>Count: {count}</h2> <button onClick={() => setCount(count + 1)}>Increment</button> </div> ); } export default function App() { return ( <div> <Counter /> </div> ); }

Component names must start with a capital letter because this helps React differentiate between built-in elements like div, button, p and components we define.

Like the documentation states:

  • Only call hooks from React function components or from custom hooks.
  • Only call hooks at the top level
  • Don't call hooks inside loops, conditions or nested functions
  • Always use hooks at the top level of your React function, before any early returns

If you meant to declare a custom hook, the name of the custom hook has to start with use, e.g. useCounter.

App.js
import React, {useState} from 'react'; // 👇️ is now a custom hook (name starts with use) function useCounter() { const [count, setCount] = useState(0); return [count, setCount]; } export default function App() { const [count, setCount] = useCounter(); return ( <div> <h2>Count: {count}</h2> <button onClick={() => setCount(count + 1)}>Increment</button> </div> ); }

Names of custom hooks must start with use for React to recognize your function as a custom hook.

Conclusion #

To solve the error "React Hook 'useState' is called in function that is neither a React function component nor a custom React Hook function", make sure to only call hooks from React function components or from custom hooks.

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.