What are Hooks?

Hooks are special functions (names start with use) that let function components use React features: state, side effects, context, refs and more. Before hooks (React 16.8) you needed class components for these.

1. Call hooks only at the top level of a component or custom hook — not inside if, loops or nested functions.
2. Call hooks only from React function components or custom hooks, not from normal functions.

function Profile({ show }) {
  // ✗ wrong: hook inside a condition
  if (show) { const [x, setX] = useState(0); }

  // ✓ right: always call it, use the value conditionally
  const [x, setX] = useState(0);
  return show ? <p>{x}</p> : null;
}