How to Fix "React Hook is Called Conditionally" Errors
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 (...)
}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 (...)
}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.
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 (...)
}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 (...)
}
Unlimited access to hundred of tutorials- Access to exclusive interactive lessons
- Remove ads to learn without distractions
