Senior Extras

function reducer(state, action) {
  switch (action.type) {
    case "loading": return { ...state, status: "loading", error: null };
    case "success": return { ...state, status: "success", data: action.payload };
    case "error":   return { ...state, status: "error", error: action.payload };
    default: return state;
  }
}

const [state, dispatch] = useReducer(reducer, { status: "idle", data: [], error: null });
dispatch({ type: "loading" });

Use it when: three or more fields change together, the next state depends on the previous one, or the transitions are rules you'd like to see in one place — a form wizard, a data-fetch state machine, a cart. Stick with useState for independent simple values.

// most Redux boilerplate for API data disappears
const { data, isLoading, isError, refetch } = useQuery({
  queryKey: ["brands", page],
  queryFn: () => getBrands(page)
});

You get caching, background refetching, retries, request de-duplication and the whole loading/error state machine (Q80) — no store, actions or thunks for data that the server owns anyway.

Q85 · Stale closure

useEffect(() => {
  const t = setInterval(() => setCount(count + 1), 1000);   // count is frozen at 0 forever
  return () => clearInterval(t);
}, []);

useEffect(() => {
  const t = setInterval(() => setCount(c => c + 1), 1000);  // updater form always sees the latest
  return () => clearInterval(t);
}, []);

A function captures the values from the render that created it. With [] it captures the first render's values — forever.

Q86 · Race condition

useEffect(() => {
  const controller = new AbortController();

  fetch(`/api/users/${userId}`, { signal: controller.signal })
    .then(r => r.json())
    .then(setUser)
    .catch(e => { if (e.name !== "AbortError") setError(e); });

  return () => controller.abort();      // cancel the old request when userId changes
}, [userId]);

Q87 · Why effects run twice in development

React 18+ StrictMode deliberately mounts a component, unmounts it and mounts it again in development. It's not a bug — it's a test of whether your cleanup is correct. If double-mounting breaks something, you had a missing cleanup. It does not happen in production builds.

Q88 · useLayoutEffect vs useEffect

Rule: default to useEffect; switch only when you see a flicker.

Q89 · The Rules of Hooks

• Call hooks only at the top level — never inside an if, a loop or a nested function.
• Call them only from React function components or other hooks.

Why: React tracks hooks by call order, not by name. If a conditional skips one, every hook after it shifts and gets another hook's state. Need a conditional? Put the condition inside the hook:

if (userId) { useEffect(...) }                // breaks the order
useEffect(() => { if (userId) {...} }, [userId]);   // correct

Q90 · Reset a component with key

<EditUserForm key={selectedUserId} user={selectedUser} />

When the key changes, React unmounts the old component and mounts a fresh one — all internal state is reset. It's the clean alternative to syncing props into state inside an effect.

Q91 · Composition instead of prop drilling

// instead of threading user through Layout → Header → UserMenu
<Layout header={<UserMenu user={user} />} />
// or
<Layout><UserMenu user={user} /></Layout>

The middle layers never see user at all. Reach for this before Context.

Q95 · Why state must be updated immutably

items.push(newItem); setItems(items);   // same reference → React sees no change → no re-render
setItems([...items, newItem]);          // new reference → re-render
setUser({ ...user, name: "Ravi" });     // same for objects

React compares with Object.is — a reference check, not a deep comparison. Mutation also breaks React.memo, useMemo and dependency arrays, all of which rely on references changing.

test("shows an error when the name is empty", async () => {
  render(<BrandForm />);
  await userEvent.click(screen.getByRole("button", { name: /save/i }));
  expect(screen.getByText(/name is required/i)).toBeInTheDocument();
});

The five points to make:

1. Query like a user: getByRole and getByLabelText first — that also enforces accessibility. Avoid test ids where you can.
2. Test behaviour, not state. Assert on what's rendered, so a refactor doesn't break every test.
3. Mock the service layer (which is easy precisely because it exists, Q43), or use MSW to intercept at the network level.
4. userEvent over fireEvent — it simulates real typing, focus and clicks.
5. Cover the branches that matter: loading, error, empty and content — the four states from Q80.

The principles to state out loud:

• Pages stay dumb, services stay smart. A page never builds a URL or touches a token.
• One place for cross-cutting concerns — auth, base URL, error shape.
• Feature folders scale. With twenty modules, "everything about stickers is in one folder" beats "all 200 components in one components/ folder".
• Types mirror the backend DTOs, so a renamed field is a compile error, not a production bug.

Q94 · Avoiding unnecessary re-renders from Context

Every consumer re-renders when the context value changes, and value={{ user, setUser }} is a new object every render. Fix it by memoizing the value and splitting contexts by concern, so a theme change doesn't re-render the whole app:

const value = useMemo(() => ({ user, login, logout }), [user]);

Q96 · CSR vs SSR, and where Next.js fits

An internal admin portal behind a login has no SEO requirement, so CSR is the right call — being able to justify that is the point.

Q97 · Synthetic events

React wraps native DOM events in a cross-browser SyntheticEvent and attaches one listener at the root instead of one per element. You get consistent behaviour everywhere, camelCase handlers like onClick, and e.preventDefault() / e.stopPropagation() work as normal.

Q98 · Debouncing

Waiting until the user stops typing before acting — so a search box makes one API call instead of one per keystroke. Implemented as a useDebounce hook with setTimeout and a cleanup that cancels the previous timer (the live example is in Module 11). Also used for autosave and resize handlers. Throttle is the sibling: run at most once every N ms, for scroll handlers.