React
Fiber architecture, Reconciliation, Hooks lifecycle, State Management, and Render Profiling.
9 In-Depth TopicsReact Fiber
Fiber is React's internal reconciliation architecture: a unit of work per component that lets rendering be split into chunks, paused, resumed, and prioritized instead of running as one uninterruptible pass.
Reconciliation, Diffing Algorithm & Keys
Reconciliation is React's recursive algorithm that compares two Virtual DOM trees to compute the minimum set of DOM mutations needed to bring the UI up to date using O(N) heuristic assumptions.
useMemo, useCallback & React.memo Internals
`useMemo` caches the result of an expensive calculation; `useCallback` caches a function definition between renders to preserve referential equality when passed to memoized children.
Concurrent React, Transitions & Suspense
Concurrent React is an interruptible rendering engine that prioritizes urgent user inputs (typing, clicking) over non-urgent background transitions (filtering, data fetching) without blocking the main thread.
React Hooks Internals, Lifecycle, and Dependency Traps
React Hooks store stateful logic and side-effects on Fiber nodes as a singly-linked list of hook objects. Their execution order must remain strictly identical on every render.
State Management Architecture: Client vs Server State
Modern frontend state architecture separates Client State (ephemeral UI state like modals and forms) from Server State (asynchronous remote data requiring caching, deduplication, and invalidation).
React Performance Optimization & Profiling Lab
React performance optimization focuses on eliminating unnecessary re-renders, breaking long JavaScript execution tasks into concurrent slices (startTransition), and reducing commit work via component composition.
Component Architecture: Reusable Button with Variants & Collapsible Accordion List
Production component design uses the Compound Component pattern, Class Variance Authority (CVA) for variants/sizes, forwardRef for DOM access, polymorphic `as` props, and strict WCAG ARIA keyboard accessibility.
React Class Component Lifecycle vs Hooks Execution Mapping
React class components manage lifecycle through instance methods (`componentDidMount`, `componentDidUpdate`, `shouldComponentUpdate`), while functional components synchronize state with side-effects using the declarative hook pipeline (`useEffect`, `useLayoutEffect`, `useMemo`, `useRef`).