Multiple state variables in React - Performance & Optimization

Performance: Multiple state variables

MEDIUM IMPACT

This affects how React updates the UI and manages rendering performance when state changes.

Managing component state for multiple independent values

React

const [count, setCount] = useState(0);
const [text, setText] = useState('');

function updateCount() {
  setCount(prev => prev + 1);
}

function updateText(newText) {
  setText(newText);
}

Each state variable updates independently, so only the parts depending on that state re-render.

📈 Performance Gainreduces unnecessary re-renders, improving interaction responsiveness (INP)

Managing component state for multiple independent values

React

const [state, setState] = useState({ count: 0, text: '' });

function updateCount() {
  setState(prev => ({ ...prev, count: prev.count + 1 }));
}

function updateText(newText) {
  setState(prev => ({ ...prev, text: newText }));
}

Updating one property causes the entire state object to update, triggering re-render and re-calculation for all state parts.

📉 Performance Costtriggers full component re-render on any state change, increasing INP and CPU usage

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Single large state object	One update triggers full component re-render	Multiple reflows if many DOM nodes depend on state	Higher paint cost due to full update	[X] Bad
Multiple independent state variables	Updates trigger minimal re-rendering	Fewer reflows limited to changed parts	Lower paint cost with targeted updates	[OK] Good

Rendering Pipeline

When a state variable updates, React schedules a re-render of the component. Multiple independent state variables allow React to isolate updates and avoid re-rendering unrelated parts.

→Reconciliation

→Commit phase

→Paint

⚠️ BottleneckReconciliation phase when large state objects cause more diffing and re-rendering

Core Web Vital Affected

INP

This affects how React updates the UI and manages rendering performance when state changes.

Optimization Tips

1Split state into multiple variables for independent updates.

2Avoid storing unrelated data in one big state object.

3Use React DevTools Profiler to monitor re-render performance.

Performance Quiz - 3 Questions

What is a performance benefit of using multiple state variables in React?

A Only the parts of the component depending on changed state re-render

B All state updates batch into a single re-render automatically

C It reduces the bundle size of the app

D It prevents any re-rendering of the component

DevTools: React DevTools Profiler

How to check: Record interactions and look at component re-render counts and durations when updating state variables.

What to look for: Excessive re-renders of components when only one state variable changes indicates poor state splitting.