Common lifting state patterns in React - Performance & Optimization

Performance: Common lifting state patterns

MEDIUM IMPACT

This affects interaction responsiveness and rendering speed by controlling how often components re-render when state changes.

Sharing state between sibling components

React

function Parent() {
  const [count, setCount] = React.useState(0);
  return (
    <>
      <ChildA setCount={setCount} />
      <ChildB count={count} />
    </>
  );
}

const ChildA = React.memo(({ setCount }) => {
  console.log('ChildA rendered');
  return <button onClick={() => setCount(c => c + 1)}>Increment</button>;
});

const ChildB = React.memo(({ count }) => {
  console.log('ChildB rendered');
  return <div>{count}</div>;
});

Using React.memo and passing only needed props reduces unnecessary re-renders, improving responsiveness.

📈 Performance GainEach child re-renders only when its relevant props change; reduces re-renders from 2 to 1 per update.

Sharing state between sibling components

React

function Parent() {
  const [count, setCount] = React.useState(0);
  return (
    <>
      <ChildA count={count} setCount={setCount} />
      <ChildB count={count} setCount={setCount} />
    </>
  );
}

function ChildA({ count, setCount }) {
  return <button onClick={() => setCount(count + 1)}>Increment</button>;
}

function ChildB({ count }) {
  return <div>{count}</div>;
}

Lifting state to the immediate parent causes both children to re-render on every state change, even if only one needs updating.

📉 Performance CostTriggers 2 re-renders per update; increases interaction latency.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Lifting state too high	Many components re-render	Multiple reflows per update	High paint cost due to many updates	[X] Bad
Lifting state minimally	Only necessary components re-render	Single reflow per update	Low paint cost	[OK] Good

Rendering Pipeline

When state is lifted too high, React re-renders many components unnecessarily, causing more layout and paint work. Optimizing state placement reduces the number of components React must update.

→Reconciliation

→Layout

→Paint

⚠️ BottleneckReconciliation stage due to excessive component re-renders

Core Web Vital Affected

INP

This affects interaction responsiveness and rendering speed by controlling how often components re-render when state changes.

Optimization Tips

1Lift state only to the nearest common ancestor that needs it.

2Use React.memo to prevent unnecessary re-renders of child components.

3Avoid lifting state higher than necessary to reduce re-render scope.

Performance Quiz - 3 Questions

What is a performance downside of lifting state too high in a React component tree?

A State becomes inaccessible to child components

B Unnecessary re-renders of many components on state change

C The app bundle size increases significantly

D CSS styles fail to apply correctly

DevTools: React DevTools Profiler

How to check: Record a profiling session while interacting with the component. Look for which components re-render on state changes.

What to look for: Components re-rendering unnecessarily indicate poor state lifting. Aim for minimal re-renders on input or state updates.