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

avatar

Borislav Hadzhiev

Wed Apr 06 20222 min read

banner

Photo by Kevin Laminto

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.

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.

Use the search field on my Home Page to filter through my more than 1,000 articles.