Controlled components in React - Performance & Optimization

Performance: Controlled components

MEDIUM IMPACT

This concept affects input responsiveness and rendering speed during user interactions.

Handling form input with React state

React

function Form() {
  const [value, setValue] = React.useState('');
  const handleChange = React.useCallback(e => setValue(e.target.value), [setValue]);
  return <input value={value} onChange={handleChange} />;
}

Using useCallback prevents unnecessary re-creation of the handler, reducing re-renders in child components and improving responsiveness.

📈 Performance GainReduces re-renders in child components, improving INP

Handling form input with React state

React

function Form() {
  const [value, setValue] = React.useState('');
  return <input value={value} onChange={e => setValue(e.target.value)} />;
}

Every keystroke updates React state causing a re-render of the component, which can slow down input responsiveness especially in large forms.

📉 Performance CostTriggers 1 re-render per keystroke, increasing INP latency

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Unmemoized onChange handler	1 input node updated per keystroke	1 reflow per keystroke	Low to medium paint cost	[X] Bad
Memoized onChange handler with useCallback	1 input node updated per keystroke	1 reflow per keystroke	Low paint cost	[OK] Good

Rendering Pipeline

When a controlled input changes, React updates state, triggers a re-render, recalculates the virtual DOM diff, and updates the real DOM if needed.

→JavaScript Execution

→Virtual DOM Diffing

→DOM Updates

→Paint

⚠️ BottleneckJavaScript Execution and Virtual DOM Diffing during frequent input changes

Core Web Vital Affected

INP

This concept affects input responsiveness and rendering speed during user interactions.

Optimization Tips

1Avoid unnecessary state updates on every keystroke.

2Memoize event handlers to prevent extra renders.

3Consider uncontrolled components for simple inputs to reduce re-renders.

Performance Quiz - 3 Questions

What is the main performance cost of using controlled components in React?

A Large bundle size increase

B Frequent re-renders on each input change

C Excessive CSS recalculations

D Network latency for input updates

DevTools: Performance

How to check: Record a performance profile while typing in the controlled input. Look for frequent React renders and long scripting times.

What to look for: High scripting time and many React render events indicate poor input responsiveness.