React Hook 'useEffect' is called conditionally error

avatar

Borislav Hadzhiev

Last updated: Apr 6, 2022

banner

Photo from Unsplash

React Hook 'useEffect' is called conditionally error #

The error "React hook 'useEffect' is called conditionally" occurs when we use the useEffect hook conditionally or after a condition that may return a value. To solve the error, move all React hooks above any conditionals that may return a value.

react hook useeffect called conditionally

Here is an example of how the error occurs.

App.js
import React, {useEffect, useState} from 'react'; export default function App() { const [count, setCount] = useState(0); if (count > 0) { // ⛔️ React Hook "useEffect" is called conditionally. // React Hooks must be called in the exact same order in every component render. useEffect(() => { console.log('count is greater than 0'); }, [count]); } return ( <div> <h2>Count: {count}</h2> <button onClick={() => setCount(count + 1)}>Increment</button> </div> ); }

The issue in the code sample is that we are calling the useEffect hook conditionally.

To solve the error, we must only call React hooks at the top level, so we can move the condition inside of the useEffect hook.

App.js
import React, {useEffect, useState} from 'react'; export default function App() { const [count, setCount] = useState(0); useEffect(() => { // 👇️ move condition in hook if (count > 0) { console.log('count is greater than 0'); } }, [count]); return ( <div> <h2>Count: {count}</h2> <button onClick={() => setCount(count + 1)}>Increment</button> </div> ); }

Moving the if statement inside of the useEffect hook helps, because the hook is now at the top level and has predictable behavior that allows React to correctly preserve the state between useState and useEffect calls.

Another cause of the error is when we call the useEffect hook after a conditional that may return a value.

App.js
import React, {useEffect, useState} from 'react'; export default function App() { const [count, setCount] = useState(0); // 👇️ might return before useEffect is called if (count > 0) { return <h1>Count is greater than 0</h1>; } // ⛔️ React Hook "useEffect" is called conditionally. // React Hooks must be called in the exact same order in every component render. // Did you accidentally call a React Hook after an early return? useEffect(() => { console.log('count is greater than 0'); }, [count]); return ( <div> <h2>Count: {count}</h2> <button onClick={() => setCount(count + 1)}>Increment</button> </div> ); }

The issue here is that the useEffect hook is called after a condition that may return a value.

To solve the error, we have to move all hook calls above the condition that could return.

App.js
import React, {useEffect, useState} from 'react'; export default function App() { const [count, setCount] = useState(0); // 👇️ moved hook above condition that may return useEffect(() => { console.log('count is greater than 0'); }, [count]); // 👇️ condition that may return is below all hooks if (count > 0) { return <h1>Count is greater than 0</h1>; } return ( <div> <h2>Count: {count}</h2> <button onClick={() => setCount(count + 1)}>Increment</button> </div> ); }

We moved the useEffect hook above the condition that might return a value.

This solves the error because we have to ensure that React hooks are called in the same order each time a component renders.

This means that we aren't allowed to use hooks inside loops, conditions or nested functions.

Like the documentation states:

  • 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
  • Only call hooks from React function components or from custom hooks.

This helps React preserve the state of hooks between multiple useState and useEffect calls.

Conclusion #

The error "React hook 'useEffect' is called conditionally" occurs when we use the useEffect hook conditionally or after a condition that may return a value. To solve the error, move all React hooks above any conditionals that may return a value.

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.