DLDevLadder📒 My Notebook
Roadmap › 4. Frontend › Step 49
Re

React (with Hooks, React 19 & Next.js basics)

JSX, components and props, state, events, conditional rendering and lists, hooks in depth, effects and data fetching, forms, context, reducers, refs, performance (memo, useMemo, useCallback, React Compiler), routing, state libraries, React 19 actions and Server Components, testing and Next.js.
Quick revision for interview day. Print it or save it as a PDF.

Core

Components = functions returning JSX · props down, callbacks up · state triggers re-render · keys for lists · immutable updates · fragments <>...</>.

Hooks

useState · useEffect (deps, cleanup) · useLayoutEffect · useRef · useMemo · useCallback · useContext · useReducer · useId · useTransition · useDeferredValue · useSyncExternalStore · React 19: use · useActionState · useFormStatus · useOptimistic · 19.2: useEffectEvent.

Effect dependency rules

none = every render · [] = mount/unmount · [x] = when x changes · cleanup before re-run and on unmount · abort fetches.

Rules of Hooks

Top level only · React functions only · names start with use.

Performance

Profile → colocate state → memo + stable props (or React Compiler) → virtualise lists → lazy + Suspense → transitions → TanStack Query caching → SSR/RSC.

State choices

Local useState · complex useReducer · subtree Context · server data TanStack Query · global Zustand/Redux Toolkit · URL params · forms React Hook Form.

Rendering models

CSR · SSR + hydration · SSG/ISR · Server Components ("use server" actions, "use client" components) · Next.js App Router.

Versions

16.8 Hooks (2019) · 18 concurrent + batching (2022) · 19 Actions + RSC stable (Dec 2024) · 19.2 Activity (Oct 2025) · React Compiler 1.0 · CRA deprecated (2025).