Why advanced patterns solve complex UIs in NextJS - Performance Evidence

Performance: Why advanced patterns solve complex UIs

HIGH IMPACT

This concept impacts page load speed and interaction responsiveness by managing how complex UI updates are handled efficiently.

Managing complex UI state and updates in a Next.js app

NextJS

import { useState, useCallback, memo } from 'react';

const Part = memo(({ value, onIncrement }) => {
  console.log('Render Part');
  return <div>
    <span>{value}</span>
    <button onClick={onIncrement}>Increment</button>
  </div>;
});

function ComplexUI() {
  const [partA, setPartA] = useState(0);
  const [partB, setPartB] = useState(0);
  const [partC, setPartC] = useState(0);

  const incA = useCallback(() => setPartA(a => a + 1), []);
  const incB = useCallback(() => setPartB(b => b + 1), []);
  const incC = useCallback(() => setPartC(c => c + 1), []);

  return <div>
    <Part value={partA} onIncrement={incA} />
    <Part value={partB} onIncrement={incB} />
    <Part value={partC} onIncrement={incC} />
  </div>;
}

Splitting state and memoizing parts prevents unrelated updates from re-rendering other UI parts, reducing DOM updates and reflows.

📈 Performance Gaintriggers reflow only for updated part, reducing INP and CPU usage significantly

Managing complex UI state and updates in a Next.js app

NextJS

function ComplexUI() {
  const [state, setState] = React.useState({ partA: 0, partB: 0, partC: 0 });
  // Updating any part causes full component re-render
  return <div>
    <button onClick={() => setState({ ...state, partA: state.partA + 1 })}>Update A</button>
    <button onClick={() => setState({ ...state, partB: state.partB + 1 })}>Update B</button>
    <button onClick={() => setState({ ...state, partC: state.partC + 1 })}>Update C</button>
    <div>{state.partA}</div>
    <div>{state.partB}</div>
    <div>{state.partC}</div>
  </div>;
}

Updating any part of the state triggers a full re-render of the entire component and all its children, causing unnecessary DOM updates.

📉 Performance Costtriggers full re-render and multiple reflows per update, increasing INP and CPU usage

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Single state object for all UI parts	High (full component re-render)	Multiple per update	High (all parts repaint)	[X] Bad
Split state with memoized components	Low (only updated parts)	Single per update	Low (minimal repaint)	[OK] Good

Rendering Pipeline

Advanced patterns reduce unnecessary React re-renders and DOM updates, minimizing layout recalculations and paint operations.

→JavaScript Execution

→Style Calculation

→Layout

→Paint

⚠️ BottleneckLayout and Paint stages due to unnecessary DOM changes

Core Web Vital Affected

INP

This concept impacts page load speed and interaction responsiveness by managing how complex UI updates are handled efficiently.

Optimization Tips

1Split complex UI state into smaller, focused pieces to limit re-renders.

2Use React.memo and useCallback to prevent unnecessary component updates.

3Avoid updating unrelated parts of the UI to reduce layout and paint costs.

Performance Quiz - 3 Questions

What is the main performance benefit of splitting state into smaller parts in a complex UI?

A Only the changed parts re-render, reducing unnecessary DOM updates

B It increases bundle size but improves style calculation

C It delays the first paint to optimize layout

D It triggers more reflows to keep UI consistent

DevTools: Performance

How to check: Record a performance profile while interacting with UI buttons. Look for React component re-render counts and layout recalculations.

What to look for: Fewer React renders and layout recalculations indicate better performance with advanced patterns.