Performance optimization improves React execution efficiency by preventing unnecessary state updates and re-renders. Memoization reuses a pure function’s previous output when its inputs are unchanged; React’s memo() applies this idea to components. section 3.2
Apply the technique selectively:
- Update state only when the resulting component output must change. section 3.2
- Memoize pure computations or components whose repeated inputs produce identical outputs. section 3.2 section 3.2.1
- Use selective data flow in Provider patterns to reduce re-renders for components with stable content. section 2.1
- Treat manual memoization as current practice while React Compiler remains experimental and not widely adopted. section 3.2
Memoizing a to-do list
A controlled to-do input updates on every keystroke, causing the item list to render repeatedly. Wrapping Items in memo() lets React reuse its result when the items prop is unchanged, reducing reconciliation work. Browser performance tools expose the cost: the unmemoized version can spend up to 5 ms per keypress against a 16 ms frame. section 3.2.1
Listing 3.6 A to-do list with memoization
import { memo, useState } from "react"; #1
const Items = memo( #2
function Items({ items }) {
return (
<>
<h2>Todo items</h2>
<ul>
{items.map((todo) => (
<li key={todo}>{todo}</li>
))}
</ul>
</>
);
});
function Todo() {
const [items, setItems] = useState(["Clean gutter", "Do dishes"]);
const [newItem, setNewItem] = useState("");
const onSubmit = (evt) => {
setItems((list) => list.concat([newItem]));
setNewItem("");
evt.preventDefault();
};
const onChange = (evt) => setNewItem(evt.target.value);
return (
<main>
<Items items={items} />
<form onSubmit={onSubmit}>
<input value={newItem} onChange={onChange} />
<button>Add</button>
</form>
</main>
);
}
function App() {
return <Todo />;
}
export default App;
Inspect the runnable React implementation that wraps the Items component with memo() while preserving the controlled input and list behavior. section 3.2.1
