Sharing state between components in React - Performance & Optimization

Performance: Sharing state between components

MEDIUM IMPACT

This affects interaction responsiveness and rendering speed when components update shared data.

Sharing state between sibling components

React

const CountContext = React.createContext();

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

function ChildA() {
  const { setCount } = React.useContext(CountContext);
  return <button onClick={() => setCount(c => c + 1)}>Increment</button>;
}

function ChildB() {
  const { count } = React.useContext(CountContext);
  return <div>{count}</div>;
}

Using context avoids prop drilling and allows components to subscribe only to needed state, reducing unnecessary re-renders.

📈 Performance GainReduces re-renders to only components consuming changed state, improving INP and CPU efficiency.

Sharing state between sibling components

React

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

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

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

Passing state and setters down multiple levels causes all children to re-render on any state change, even if they don't need to update.

📉 Performance CostTriggers re-render of all children on each state update, increasing INP and CPU usage.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Prop drilling shared state	Many props passed down	Multiple re-renders on update	High paint cost due to many updates	[X] Bad
Context API with focused state	Minimal prop passing	Re-renders only subscribed components	Lower paint cost	[OK] Good
Global state with full object updates	Broad state access	Triggers many re-renders	High paint and layout cost	[X] Bad
Split contexts and memoized callbacks	Scoped updates	Minimal re-renders	Low paint and layout cost	[OK] Good

Rendering Pipeline

When shared state updates, React schedules re-renders for components consuming that state. Excessive or broad state sharing causes many components to re-render, increasing layout and paint work.

→JavaScript Execution

→Style Calculation

→Layout

→Paint

⚠️ BottleneckJavaScript Execution and Layout due to many components re-rendering and recalculating styles.

Core Web Vital Affected

INP

This affects interaction responsiveness and rendering speed when components update shared data.

Optimization Tips

1Avoid passing shared state through many component layers to prevent excessive re-renders.

2Use React Context or state management libraries to scope state updates efficiently.

3Memoize callbacks and split state to minimize components re-rendering unnecessarily.

Performance Quiz - 3 Questions

What is a common performance issue when sharing state by passing props down many component levels?

A State updates are delayed by network latency.

B All child components re-render on any state change, even if they don't use that state.

C The browser blocks rendering until all props are passed.

D CSS styles are recalculated only once.

DevTools: React DevTools Profiler

How to check: Open React DevTools, go to Profiler tab, record while interacting with components that share state, then analyze which components re-render and how long they take.

What to look for: Look for unnecessary re-renders of components that do not depend on changed state, and long render durations indicating performance bottlenecks.