What is a Hook

What is a Hook: React Hooks Rules & Functional Paradigm Shift

Introduced in React 16.8, Hooks are functions that let you "hook into" React state and lifecycle features directly from functional components.

Before hooks, functional components were stateless presentation templates. Hooks eliminated the need for complex Class Component syntax, this binding confusion, and fragmented lifecycle methods.

The Two Core Rules of React Hooks

To guarantee that hooks execute in the exact same order on every component render, you must strictly follow the Rules of Hooks:

flowchart TD
    Rules["Rules of Hooks"] --> Rule1["1. Call Hooks ONLY at Top Level (Never inside loops, conditions, or nested functions)"]
    Rules --> Rule2["2. Call Hooks ONLY from React Function Components or Custom Hooks"]

Standard React Built-in Hooks Summary

Code Example Violating vs Following Rules

// ❌ WRONG: Calling Hook inside a conditional branch
function BadComponent({ isAuthorized }) {
  if (isAuthorized) {
    const [secret, setSecret] = useState(''); // VIOLATION!
  }
  return <div>Bad Pattern</div>;
}

// ✅ CORRECT: Top-level Hook declaration
function GoodComponent({ isAuthorized }) {
  const [secret, setSecret] = useState('');

  if (!isAuthorized) {
    return <div>Unauthorized</div>;
  }

  return <div>Secret: {secret}</div>;
}

Self-Check Challenge

Explain why calling a hook inside an if condition breaks React's internal state tracking across re-renders.