What are the rules of hooks and why do they exist?

React stores hook state in a linked list attached to the component's Fiber. On each render it walks that list in the same order the hooks are called. There is no hook name or ID to look up, so the only thing connecting a useState call to its stored value is its position in the sequence.

function Profile({ user }) {
  const [open, setOpen] = useState(false);

  if (!user) {
    return <p>No user</p>;
  }

  useEffect(() => {
    document.title = user.name;
  }, [user.name]);

  return <h1>{user.name}</h1>;
}

What breaks the rules

• Calling a hook inside an if, loop or callback
• Returning before a hook that runs on other renders
• Calling a hook from a regular JavaScript helper
• Calling a hook from a class component

function Bad({ enabled }) {
  if (enabled) {
    useEffect(() => {
      console.log("enabled");
    }, []);
  }

  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

The rule is about call order, not about where the code lives. A custom hook can contain conditionals as long as its own hook calls remain unconditional. If you need conditional behaviour, put the condition inside the hook or split the component into separate children.