A Look Behind the Scenes of React & Optimization Techniques

React ↔ Angular reference. React examples use React 19 + TypeScript. Angular examples use modern Angular (standalone components, signals, computed(), @if/@for).

Test yourself

15 questions

1
How React Executes Components
When a component's state changes, React re-executes that component function and every component nested inside it.
2
Profiling with React DevTools
The React DevTools browser extension includes a Profiler that records which components rendered, how long they took, and why.
3
memo(): Skipping Re-Renders When Props Are Unchanged
memo(Component) returns a version of the component that skips re-executing when its parent re-renders but its props haven't changed.
4
Structuring Components to Avoid Re-Renders
Placing state in the smallest component that needs it, so fewer components re-render when it changes.
5
useMemo (and How It Differs from useCallback)
useMemo(calculate, deps) caches the result of a calculation and recomputes it only when a dependency changes.
6
The Virtual DOM and Reconciliation
React keeps a lightweight in-memory description of the UI (the virtual DOM). After each render, it compares the new description with the previous one and applies only the differences to the real DOM.
7
Keys: Lists, State Position, and Resetting State
A key gives an element a stable identity so React can match it between renders.
8
State Update Batching and Scheduling
React doesn't apply state updates immediately. It queues them and processes all updates from the same event in a single re-render.
9
The React Compiler
A build-time tool that automatically memoizes components, values, and functions, so manual memo(), useMemo, and useCallback are rarely needed.
10
Summary