Why lifting state is needed in React - Performance Evidence

Performance: Why lifting state is needed

MEDIUM IMPACT

This affects how efficiently React components update and share data, impacting interaction responsiveness and rendering speed.

Sharing state between sibling components

React

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

// State is lifted and shared, keeping data consistent

Single source of truth reduces redundant renders and keeps components in sync efficiently.

📈 Performance GainReduces re-renders and improves INP by minimizing state updates

Sharing state between sibling components

React

function Parent() {
  const [countA, setCountA] = React.useState(0);
  const [countB, setCountB] = React.useState(0);
  return (
    <>
      <ComponentA count={countA} setCount={setCountA} />
      <ComponentB count={countB} setCount={setCountB} />
    </>
  );
}

// ComponentA and ComponentB cannot share state easily

State is duplicated in parent for each component, causing inconsistent data and extra renders when syncing is needed.

📉 Performance CostTriggers multiple re-renders and state updates, increasing INP latency

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Duplicated state in multiple parents	Multiple state updates causing many DOM changes	Triggers reflows for each component update	Higher paint cost due to frequent updates	[X] Bad
Lifted state in common ancestor	Single state update triggers minimal DOM changes	Single reflow per update	Lower paint cost with batched updates	[OK] Good

Rendering Pipeline

When state is lifted, React updates a single state source causing fewer component re-renders. This reduces the number of times React recalculates the virtual DOM and applies changes to the real DOM.

→Reconciliation

→Commit (DOM Update)

⚠️ BottleneckExcessive re-renders due to duplicated or scattered state

Core Web Vital Affected

INP

This affects how efficiently React components update and share data, impacting interaction responsiveness and rendering speed.

Optimization Tips

1Lift shared state to the closest common ancestor component.

2Avoid duplicating state across sibling components to prevent redundant renders.

3Use React DevTools Profiler to identify unnecessary re-renders caused by scattered state.

Performance Quiz - 3 Questions

What is a main performance benefit of lifting state in React?

A Increases bundle size

B Reduces unnecessary component re-renders

C Triggers more DOM reflows

D Blocks rendering on every input

DevTools: React DevTools Profiler

How to check: Record interactions and observe component re-render counts and durations when state changes.

What to look for: Look for fewer re-renders and shorter update times when state is lifted versus duplicated.