Topics in this subject
31 topics
React
Mental Model
React is declarative, component-based UI where UI = f(state) with one-way data flow over a Virtual DOM.
✓JSX
JSX is syntactic sugar over React.createElement — expressions in braces, camelCase props, one root, no inline if.
✓Components & Props
Function components take read-only props flowing parent→child; use children, defaults, spread, and Context to avoid drilling.
✓State & useState
useState gives per-render snapshots; use functional updates, lazy init, batching, and immutable updates to avoid stale-state bugs.
✓Rendering, Virtual DOM & Reconciliation
Render phase builds and diffs a Virtual DOM; commit phase applies minimal DOM mutations, with keys guiding reconciliation.
✓Lists & Keys
Render arrays with .map and stable unique keys; avoid index keys, which cause state and DOM bugs on reorder.
✓Conditional Rendering
Rendering UI conditionally with &&, ternary, early return null, JSX variables, and the 0-renders bug.
✓Events
Synthetic events, camelCase handlers, passing arguments, preventDefault/stopPropagation, and root-level delegation.
✓Forms
Controlled vs uncontrolled inputs, multiple fields, checkboxes/selects, submission, and when to reach for RHF.
✓useEffect & Effects
Effects run after paint, dependency arrays, cleanup timing, and the stale-closure / infinite-loop / overuse pitfalls.
✓Rules of Hooks
Call hooks only at the top level and only from React functions — why stable call order matters.
✓useRef & the DOM
useRef for DOM access and mutable render-persistent values that don't trigger re-renders; forwardRef and pitfalls.
✓useContext & Context API
Context shares values without prop drilling; every consumer re-renders on value change—memoize and split.
✓useReducer
Reducer (state, action)=>newState centralizes complex state transitions; pair with Context for app-wide state.
✓useMemo & useCallback
useMemo caches a value, useCallback caches a function reference—both for referential stability, not raw speed.
✓React.memo & Performance
React.memo skips re-render on shallow-equal props; inline objects/functions/children break it—stabilize with hooks.
✓Custom Hooks
Custom hooks extract reusable stateful logic; they share logic not state—each call gets isolated state.
✓Composition & children
Compose components via the children prop and slots; favor composition over inheritance for flexible reuse.
✓Error Boundaries
Class components that catch render/lifecycle errors in children and show a fallback UI instead of crashing.
✓Portals
Rendering children into a different DOM node while keeping them in the React tree so events bubble normally.
✓Suspense & Code Splitting
Lazy-load components with React.lazy and Suspense, split by route, and show fallbacks while chunks resolve.
✓Concurrent Features
React 18 interruptible rendering with useTransition, useDeferredValue, and startTransition to keep the UI responsive.
✓Other Hooks
Less-common hooks: useLayoutEffect, useId, useSyncExternalStore, useImperativeHandle, and useDebugValue.
✓Data Fetching
Fetching in useEffect, avoiding race conditions, handling states, and why React Query/SWR win.
✓Routing (React Router)
React Router v6+: routes, nested outlets, hooks, data router loaders/actions, and protected routes.
✓State Management
Local vs lifted vs global state, when Context suffices, and Redux Toolkit, Zustand, Jotai/Recoil.
✓Design Patterns
Custom hooks, compound components, render props, HOCs, and controlled vs uncontrolled components.
✓Server Components & Next.js
React Server Components, the use client boundary, streaming, and Next.js App Router with server actions.
✓Testing
React Testing Library philosophy, queries by role/text, userEvent, async findBy, and mocking fetch.
✓Gotchas & Anti-patterns
Common React mistakes — keys, mutation, needless effects, stale closures — each with the fix.
✓Cheat Sheet
Quick reference — all built-in hooks, JSX rules, effect deps, and a performance checklist.
No topics match that search.