Hooks Deep Dive

The rest of React's built-in hooks - useRef, useReducer, useId, and the rules that govern how all hooks work together.

What it is, in plain English: Beyond useState and useEffect, React provides several more built-in hooks for specific jobs: useRef holds a mutable value that persists across renders without triggering re-renders (often used for DOM references). useReducer manages complex state logic with multiple sub-values via a reducer function, similar to Redux. useId generates unique IDs for accessibility attributes. Understanding these fills out the complete hooks toolkit for building real applications.

useRef -- a box that doesn't trigger re-renders

useState causes a re-render every time you update it. Sometimes you need to remember a value across renders WITHOUT causing a re-render -- that's what useRef is for.

The most common use -- accessing a DOM element

function TextInputWithFocusButton() {
  const inputRef = React.useRef(null);

  function handleClick() {
    inputRef.current.focus();   // .current gives you the actual DOM node
  }

  return (
    <>
      <input ref={inputRef} />
      <button onClick={handleClick}>Focus the input</button>
    </>
  );
}

// React sets inputRef.current to the real <input> DOM element after it mounts.
// This is the standard way to call DOM methods (focus, scrollIntoView, play, etc.)
// that React doesn't have a declarative prop for.

useRef for storing any mutable value

function StopwatchTimer() {
  const [elapsed, setElapsed] = React.useState(0);
  const intervalRef = React.useRef(null);   // stores the interval ID

  function start() {
    intervalRef.current = setInterval(() => {
      setElapsed(e => e + 1);
    }, 1000);
  }

  function stop() {
    clearInterval(intervalRef.current);   // read the stored ID to clear it
  }

  return (
    <div>
      <p>{elapsed}s</p>
      <button onClick={start}>Start</button>
      <button onClick={stop}>Stop</button>
    </div>
  );
}
// Key difference from useState: changing intervalRef.current does NOT
// cause a re-render. useRef is for values the component needs to remember
// but that should never directly cause the UI to update.

The Rules of Hooks, restated clearly

// 1. Only call hooks at the TOP LEVEL of a component or custom hook
//    (never inside if/for/while/nested functions)
// 2. Only call hooks from React function components or custom hooks
//    (never from regular JS functions or class components)

function GoodComponent() {
  const [a, setA] = React.useState(0);   // ✓ top level
  const ref = React.useRef(null);         // ✓ top level
  React.useEffect(() => {}, []);          // ✓ top level

  if (a > 5) {
    // const [b] = React.useState(0);    // ✗ would break the rules
  }
}

Try It Yourself (JSX)

// The rest of React's hooks toolkit

// useRef -- a mutable box that persists across renders WITHOUT causing re-renders
function FocusInput() {
  const inputRef = React.useRef(null);

function handleClick() {
    inputRef.current.focus();  // directly access the DOM node
  }

return (
    <div>
      <input ref={inputRef} placeholder="Click button to focus me" />
      <button onClick={handleClick}>Focus the input</button>
    </div>
  );
}

// useRef for storing a mutable value (not just DOM refs)
function RenderCounter() {
  const renderCount = React.useRef(0);
  renderCount.current += 1;  // mutating ref.current does NOT trigger a re-render

const [text, setText] = React.useState("");

return (
    <div>
      <input value={text} onChange={e => setText(e.target.value)} />
      <p>This component has rendered {renderCount.current} times</p>
    </div>
  );
}

// useReducer -- for complex state logic with multiple related values
function reducer(state, action) {
  switch (action.type) {
    case "increment": return { count: state.count + 1, history: [...state.history, "+"] };
    case "decrement": return { count: state.count - 1, history: [...state.history, "-"] };
    case "reset":      return { count: 0, history: [] };
    default: throw new Error("Unknown action: " + action.type);
  }
}

function CounterWithHistory() {
  const [state, dispatch] = React.useReducer(reducer, { count: 0, history: [] });

return (
    <div>
      <p>Count: {state.count}</p>
      <p>History: {state.history.join(" ")}</p>
      <button onClick={() => dispatch({ type: "increment" })}>+1</button>
      <button onClick={() => dispatch({ type: "decrement" })}>-1</button>
      <button onClick={() => dispatch({ type: "reset" })}>Reset</button>
    </div>
  );
}

function App() {
  return (
    <div>
      <FocusInput />
      <RenderCounter />
      <CounterWithHistory />
    </div>
  );
}

useReducer for complex state logic

When useState becomes unwieldy

// Many related setState calls scattered through a component get hard to follow:
function FormBuggyStyle() {
  const [name, setName] = React.useState("");
  const [email, setEmail] = React.useState("");
  const [errors, setErrors] = React.useState({});
  const [submitting, setSubmitting] = React.useState(false);
  // ... handleChange, handleSubmit, handleReset all touching different pieces ...
}

// useReducer centralises all the state TRANSITIONS in one function:
function formReducer(state, action) {
  switch (action.type) {
    case "field":     return { ...state, [action.field]: action.value };
    case "submit":     return { ...state, submitting: true };
    case "success":    return { ...state, submitting: false, errors: {} };
    case "error":      return { ...state, submitting: false, errors: action.errors };
    case "reset":      return initialState;
    default: throw new Error(`Unknown action: ${action.type}`);
  }
}

const initialState = { name: "", email: "", errors: {}, submitting: false };

function Form() {
  const [state, dispatch] = React.useReducer(formReducer, initialState);

  function handleChange(e) {
    dispatch({ type: "field", field: e.target.name, value: e.target.value });
  }

  return (
    <input name="name" value={state.name} onChange={handleChange} />
  );
}

useReducer with lazy initialization

// Third argument: a function to compute the initial state lazily
function init(initialCount) {
  return { count: initialCount, history: [] };
}

function reducer(state, action) {
  if (action.type === "reset") return init(action.payload);
  if (action.type === "increment") return { ...state, count: state.count + 1 };
  return state;
}

function Counter({ startValue }) {
  const [state, dispatch] = React.useReducer(reducer, startValue, init);
  // init(startValue) only runs once, on mount -- good for expensive setup
}

useId -- stable unique IDs for accessibility

function LabeledInput({ label }) {
  const id = React.useId();   // generates a unique, stable ID
  return (
    <>
      <label htmlFor={id}>{label}</label>
      <input id={id} />
    </>
  );
}
// Why not Math.random() or a counter variable? useId is stable across
// server and client rendering (important for SSR/Next.js — avoids
// hydration mismatches that a random ID would cause).

forwardRef, useImperativeHandle, and hook implementation details

// Forwarding a ref through a custom component (needed because function
// components can't receive 'ref' as a normal prop):
const FancyInput = React.forwardRef((props, ref) => {
  return <input {...props} ref={ref} className="fancy" />;
});

function Parent() {
  const inputRef = React.useRef(null);
  return (
    <>
      <FancyInput ref={inputRef} />
      <button onClick={() => inputRef.current.focus()}>Focus</button>
    </>
  );
}

// useImperativeHandle -- customise what the ref exposes (rare, advanced):
const VideoPlayer = React.forwardRef((props, ref) => {
  const videoRef = React.useRef(null);

  React.useImperativeHandle(ref, () => ({
    play()  { videoRef.current.play(); },
    pause() { videoRef.current.pause(); },
    // expose ONLY these methods, hiding the raw DOM node
  }));

  return <video ref={videoRef} {...props} />;
});

Why the Rules of Hooks exist at the implementation level

Each component's Fiber stores hooks as a linked list, in call order. React has no concept of "the useState for this variable" -- it only knows "the 3rd hook call in this component." If a hook is called conditionally, the Nth hook call in one render might correspond to a completely different hook in the next render, silently corrupting state. This is purely a consequence of the linked-list implementation, not an arbitrary restriction -- which is also why ESLint's eslint-plugin-react-hooks can statically detect violations: it understands this exact constraint.

Official Sources

The Codex links only to official documentation. No third-party tutorials.