A Look Behind the Scenes of React & Optimization TechniquesEntry 4 of 10
Structuring Components to Avoid Re-Renders
Placing state in the smallest component that needs it, so fewer components re-render when it changes.
Notes
Often the best optimization isn't memo() at all. If App holds the value of a text input, every keystroke re-renders App and everything under it. Move that state into its own small component, and only that component re-renders while typing.
This is the opposite direction of lifting state up (React Essentials, Entry 8): lift state only as high as needed, and push purely local state down.
What / Why / When
- What
Moving state down into a dedicated child component.
- Why
Cuts re-renders without any memoization, and often makes components clearer.
- When
A frequently changing value (input text, hover, timers) lives in a component with many expensive children.
- Use case
A number input that sets a counter's start value, extracted so typing doesn't re-render
Counter.
Code compare
import { useState } from "react";// ✅ The input's state lives here; typing re-renders only this componentfunction ConfigureCounter({ onSet }: { onSet: (value: number) => void }) { const [enteredNumber, setEnteredNumber] = useState(0); function handleSet() { onSet(enteredNumber); setEnteredNumber(0); } return ( <section> <input type="number" value={enteredNumber} onChange={(e) => setEnteredNumber(Number(e.target.value))} /> <button onClick={handleSet}>Set</button> </section> );}export function App() { const [chosenCount, setChosenCount] = useState(0); return ( <main> <ConfigureCounter onSet={setChosenCount} /> <Counter initialCount={chosenCount} /> </main> );}The same design principle applies: keep state in the component that owns it. The performance payoff is smaller, because a signal change updates only the bindings that read it rather than re-running a component tree.
No Angular code for this example.
Quick reference
| React | Angular |
|---|---|
| Move fast-changing state down | Keep state local; signals already limit updates |
Often better than memo() | Good design, smaller performance impact |