Webtips

How to Fix "React Hook is Called Conditionally" Errors

Ferenc Almasi • 2022 September 15 • 📖 3 min read

The error "React Hook is called conditionally" happens when you try to call a React hook inside a loop, after a condition, or inside a function. To solve the error, make sure you call hooks at the top level. Take a look at the following example:

export default function App() {
    if (condition) {
        return null
    }

    const [count, setCount] = useState(0)

    return (...)
}
React hook called conditionally will trigger an error
Copied to clipboard!

Here we are creating a hook after a condition that will trigger the error. To resolve it, simply move the hook above the condition.

export default function App() {
    const [count, setCount] = useState(0)
  
    if (condition) {
        return null
    }

    return (...)
}
React hook is moved above all conditions
Copied to clipboard!

The reason hooks must be called at the top level is because they need to be called in the same order each time a component renders, otherwise, React will have problems preserving the state of hooks between multiple render calls.

Looking to improve your skills? Check out our interactive course to master JavaScript from start to finish.
Master JavaScript

The same error can also occur when you try to use a hook inside a loop, or a function. Instead, if you want to run an effect conditionally, you can turn things around and define your logic inside the hook.

// 🔴 Won't work, hook is called inside a function
export default function App() {
    const setCount = () => {
        const [count, setCount] = useState(0)
        ...
    }

    return (...)
}

// 🔴 Won't work, hook is called inside a loop
export default function App() {
    data.map((item, index) => {
        const [count, setCount] = useState(index)
        ...
    })

    return (...)
}

// 🔴 Won't work, hook is called conditionally
export default function App() {
    if (condition) {
        useEffect(() => {

        }, [])
    }

    return (...)
}

// ✔️ Will work, condition is called within the hook
export default function App() {
    useEffect(() => {
        if (condition) {

        }
    }, [])

    return (...)
}
Copied to clipboard!

Also, make sure you only call hooks inside React components, or from other custom hooks, otherwise, you will run into the following error: "React Hook "useState" cannot be called at the top level. React Hooks must be called in a React function component or a custom React Hook function."

// 🔴 Won't work, hook is called outside of a component
const [count, setCount] = useState(0)

export default function App() {
    return (...)
}

// ✔️ Always call hooks from a component
export default function App() {
    const [count, setCount] = useState(0)

    return (...)
}
Only call hooks inside components
Copied to clipboard!
Share on
  • twitter
  • facebook
JavaScript Course Dashboard

Tired of looking for tutorials?

You are not alone. Webtips has more than 400 tutorials which would take roughly 75 hours to read.

Check out our interactive course to master JavaScript in less time.

Learn More

Recommended