React Hooks

Hooks are functions that let function components have state and side effects. The ones you must know: useState, useEffect, useRef, useContext. Then useMemo / useCallback when you actually measure extra renders. Custom hooks (useUser, useDebounce) share logic. Classes cannot use hooks — that is why old code still has this.state.

Rules, say them slowly: only call hooks at the top level of a React function (component or custom hook). Not inside if, loops, or nested functions. Same order every render. Names start with use so linters can catch mistakes. Break the order, React throws. This is not optional style.

Let’s share fetch on the board. function useUser(id) { const [user, setUser] = useState(null); useEffect(() => { …fetch… }, [id]); return user; } then Profile and Header both call useUser(id). Same hook rules inside useUser. That is how you stop copy-pasting fetch into five files.

useMemo caches a computed value. useCallback caches a function identity. Don’t wrap everything. Wrap when a child is memoised and a new inline function would break the skip, or when a calculation is actually heavy. Freshers memo-everything and still pass style={{}} — wasted ceremony.

Trap: useState inside if (user). Trap: calling hooks from a plain util.js that is not a hook. Trap: useEffect for something you can compute during render. Trap: ‘hooks replaced Redux’ as a slogan — they replaced classes for local state; big shared state is a separate choice.

React Hooks — click → n updates → effect sets tab title. Both hooks run in the same order every render.

Exam tip

Hook rules + one custom hook example.

Example

// Hooks
import { useState, useEffect } from "react";

export default function Title() {
  const [n, setN] = useState(0);
  useEffect(() => {
    document.title = "Clicks " + n;
  }, [n]);
  return <button onClick={() => setN(n + 1)}>{n}</button>;
}

React Hooks — click → n updates → effect sets tab title. Both hooks run in the same order every render.

Short notes

DefHooks are functions (useState, useEffect, useRef, useContext…) that add state and effects to function components.
RuleTop level only, same order every render, only in React functions. Name them useSomething.
RememberClasses cannot use hooks. Custom hook = function starting with use that calls other hooks.
UseLocal state, fetch after paint, DOM focus, theme/auth context, shared useUser logic.
TrapHook inside if/loop. Hook in a random util. Memoising everything. Claiming hooks = Redux.
ExuseUser(id) wraps useState + useEffect so Profile and Header don’t copy-paste fetch.
LearnuseState → useEffect → useRef → useContext → custom hook. useMemo/useCallback when measured.

React Hooks

React Hooks — click → n updates → effect sets tab title. Both hooks run in the same order every render.

Exam tip

Hook rules + one custom hook example.

Example

// Hooks
import { useState, useEffect } from "react";

export default function Title() {
  const [n, setN] = useState(0);
  useEffect(() => {
    document.title = "Clicks " + n;
  }, [n]);
  return <button onClick={() => setN(n + 1)}>{n}</button>;
}

React Hooks — click → n updates → effect sets tab title. Both hooks run in the same order every render.

Short notes

DefHooks are functions (useState, useEffect, useRef, useContext…) that add state and effects to function components.
RuleTop level only, same order every render, only in React functions. Name them useSomething.
RememberClasses cannot use hooks. Custom hook = function starting with use that calls other hooks.
UseLocal state, fetch after paint, DOM focus, theme/auth context, shared useUser logic.
TrapHook inside if/loop. Hook in a random util. Memoising everything. Claiming hooks = Redux.
ExuseUser(id) wraps useState + useEffect so Profile and Header don’t copy-paste fetch.
LearnuseState → useEffect → useRef → useContext → custom hook. useMemo/useCallback when measured.

React Hooks

Example

Short notes

Questions

React Hooks

Example

Short notes

Questions