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 (...)
}
Want to get weekly updates to your mailbox? 📬
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 5 hours.
Learn More📚 Get access to exclusive content
Want to get access to exclusive content? Support webtips with the price of a coffee to get access to tips, checklists, cheatsheets, and much more. ☕
Get access
