Performance
Avoiding Unnecessary Renders
Written by Swapnil RajaPublished
The cheapest render is one that never happens. Moving state to where it is used solves more performance problems than memoisation, and adds nothing to maintain.
Move state down
State high in the tree re-renders everything below it. If only one small component uses a value, the state belongs in that component - the opposite of lifting state up, and just as important.
The same input, two placements
jsx
function Heavy({ label }) {
const renders = React.useRef(0)
renders.current++
return <p>{label} rendered {renders.current} times</p>
}
function SearchBox() {
// State lives here, so only this component re-renders as you type.
const [text, setText] = React.useState("")
return <input value={text} onChange={(e) => setText(e.target.value)} placeholder="type here" />
}
function App() {
return (
<div>
<SearchBox />
<Heavy label="Sibling" />
<p style={{ color: "#64748b" }}>
Type in the box — the sibling's count does not move.
</p>
</div>
)
}
const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(<App />)