Reconciler Loop

The reconciler ties everything together:

Trigger re-render when state changes:

Without state management: re-rendering the whole tree.

React's strategy:

• Render tree from root.
• Diff against previous.
• Apply minimal DOM ops.
• Schedule re-render via requestAnimationFrame.

Optimizations:

• Memoization (React.memo): skip re-rendering a component if props unchanged (shallow compare).
• PureComponent (legacy): same idea, classes.
• useMemo / useCallback: cache values/functions across renders.

Concurrent rendering (React 18):

• Render in chunks.
• Yield to browser between chunks.
• Suspense for async data.
• Time-slicing prevents jank.

Internally: Fiber data structure (linked list of work units).

Effect timing:

• During render: don't touch DOM (could be canceled).
• After commit: DOM is up-to-date; useEffect runs.

Critical: render = pure (no side effects). Effects = imperative.

Modern: Server Components — render on server, send HTML + minimal client JS for interactivity. Reduces bundle size.