A Look Behind the Scenes of React & Optimization TechniquesEntry 1 of 10
How React Executes Components
When a component's state changes, React re-executes that component function and every component nested inside it.
Notes
- A component re-executes (re-renders) when its own state changes, when its parent re-renders, or when a context it consumes changes.
- Re-rendering is not the same as updating the DOM. React re-runs the function to produce new JSX, then updates only the DOM parts that actually changed (Entry 6).
- Most re-renders are cheap. Optimize only when profiling shows a real problem (Entry 2).
What / Why / When
- What
React's rendering model: top-down re-execution from the component whose state changed.
- Why it matters
State placed high in the tree re-runs large parts of the app on every change.
- When to care
Slow interactions, expensive calculations in render, or large lists.
Angular
Angular never re-runs a component class. Change detection checks template bindings, and with signals only the bindings that read a changed signal are updated. New projects in recent Angular versions run zoneless, where change detection is scheduled by signal changes, events, and markForCheck(), not by every async browser event.
Quick reference
| React | Angular |
|---|---|
| State change re-runs the component and its children | Signal change updates bindings that read it |
| Re-render ≠ DOM update | Binding update = targeted DOM update |