Hooks are defined using JavaScript functions, but they represent a special type of reusable UI logic with restrictions on where they can be called.
Only call Hooks at the top level
Functions whose names start withuse are calledHooks in React.
Don’t call Hooks inside loops, conditions, nested functions, ortry/catch/finally blocks. Instead, always use Hooks at the top level of your React function, before any early returns. You can only call Hooks while React is rendering a function component:
- ✅ Call them at the top level in the body of afunction component.
- ✅ Call them at the top level in the body of acustom Hook.
functionCounter(){
// ✅ Good: top-level in a function component
const[count,setCount] =useState(0);
// ...
}
functionuseWindowWidth(){
// ✅ Good: top-level in a custom Hook
const[width,setWidth] =useState(window.innerWidth);
// ...
}It’snot supported to call Hooks (functions starting withuse) in any other cases, for example:
- 🔴 Do not call Hooks inside conditions or loops.
- 🔴 Do not call Hooks after a conditional
returnstatement. - 🔴 Do not call Hooks in event handlers.
- 🔴 Do not call Hooks in class components.
- 🔴 Do not call Hooks inside functions passed to
useMemo,useReducer, oruseEffect. - 🔴 Do not call Hooks inside
try/catch/finallyblocks.
If you break these rules, you might see this error.
functionBad({cond}){
if(cond){
// 🔴 Bad: inside a condition (to fix, move it outside!)
consttheme =useContext(ThemeContext);
}
// ...
}
functionBad(){
for(leti =0;i <10;i++){
// 🔴 Bad: inside a loop (to fix, move it outside!)
consttheme =useContext(ThemeContext);
}
// ...
}
functionBad({cond}){
if(cond){
return;
}
// 🔴 Bad: after a conditional return (to fix, move it before the return!)
consttheme =useContext(ThemeContext);
// ...
}
functionBad(){
functionhandleClick(){
// 🔴 Bad: inside an event handler (to fix, move it outside!)
consttheme =useContext(ThemeContext);
}
// ...
}
functionBad(){
conststyle =useMemo(()=>{
// 🔴 Bad: inside useMemo (to fix, move it outside!)
consttheme =useContext(ThemeContext);
returncreateStyle(theme);
});
// ...
}
class BadextendsReact.Component{
render(){
// 🔴 Bad: inside a class component (to fix, write a function component instead of a class!)
useEffect(()=>{})
// ...
}
}
functionBad(){
try{
// 🔴 Bad: inside try/catch/finally block (to fix, move it outside!)
const[x,setX] =useState(0);
}catch{
const[x,setX] =useState(1);
}
}You can use theeslint-plugin-react-hooks plugin to catch these mistakes.
Note
Custom Hooksmay call other Hooks (that’s their whole purpose). This works because custom Hooks are also supposed to only be called while a function component is rendering.
Only call Hooks from React functions
Don’t call Hooks from regular JavaScript functions. Instead, you can:
✅ Call Hooks from React function components.✅ Call Hooks fromcustom Hooks.
By following this rule, you ensure that all stateful logic in a component is clearly visible from its source code.
functionFriendList(){
const[onlineStatus,setOnlineStatus] =useOnlineStatus();// ✅
}
functionsetOnlineStatus(){// ❌ Not a component or custom Hook!
const[onlineStatus,setOnlineStatus] =useOnlineStatus();
}