What are the rules you must follow when writing and using hooks, including custom hooks?

Hooks must always be called at the top level of a function component or another hook, never inside loops, conditions, or nested functions. This ensures React can correctly keep track of each hook's state between renders. Following this rule keeps custom hooks working reliably and predictably.

// Wrong, hook called conditionally
if (isLoggedIn) {
  useEffect(() => { /* ... */ }, []);
}

// Correct, hook always called, condition handled inside
useEffect(() => {
  if (isLoggedIn) { /* ... */ }
}, [isLoggedIn]);