A component re-renders whenever its own state changes, whenever the props passed to it change, or whenever its parent re-renders for any reason, by default — that last part means a re-render can cascade to every child component in a subtree even if a specific child's own props didn't actually change, unless that child is specifically wrapped in React.memo() to opt out of unnecessary re-renders based on unchanged props. React batches multiple state updates that happen within the same event handler into a single re-render for efficiency, rather than re-rendering separately after each individual state update call.
1Understanding Component Rendering
A component re-renders whenever its own state changes, whenever the props passed to it change, or whenever its parent re-renders for any reason, by default — that last part means a re-render can cascade to every child component in a subtree even if a specific child's own props didn't actually change, unless that child is specifically wrapped in React.memo() to opt out of unnecessary re-renders based on unchanged props. React batches multiple state updates that happen within the same event handler into a single re-render for efficiency, rather than re-rendering separately after each individual state update call.
Wrap a component in React.memo() when it's expensive to render and its parent re-renders often for unrelated reasons, so it only re-renders when its own props actually change — but don't reach for this optimization by default, since it adds its own overhead and complexity that isn't worth it for cheap, simple components.
function Parent() {
const [count, setCount] = useState(0);
console.log('Parent rendered');
return (
<div>
<button onClick={() => setCount(count + 1)}>Increment</button>
<Child />
</div>
);
}
function Child() {
console.log('Child rendered');
return <p>I am a child.</p>;
}2Practical Example
Here is a real-world application of Component Rendering showing how it is used in production React code.
const Child = React.memo(function Child() {
console.log('Child rendered');
return <p>I am a child.</p>;
});3Best Practices
Follow these guidelines when working with Component Rendering:
1. Rely on React's default re-rendering behavior for most components, reaching for React.memo() only when a specific, genuinely expensive component's unnecessary re-renders are a measured performance problem
2. Remember that multiple state updates inside the same event handler are batched into a single re-render, rather than triggering a separate render for each one
3. Avoid creating new object, array, or function values inline as props to a memoized child on every render, since a new reference defeats React.memo()'s comparison even if the logical value is unchanged
Tip: Wrap a component in React.memo() when it's expensive to render and its parent re-renders often for unrelated reasons, so it only re-renders when its own props actually change — but don't reach for this optimization by default, since it adds its own overhead and complexity that isn't worth it for cheap, simple components.
function Parent() {
const [count, setCount] = useState(0);
console.log('Parent rendered');
return (
<div>
<button onClick={() => setCount(count + 1)}>Increment</button>
<Child />
</div>
);
}
function Child() {
console.log('Child rendered');
return <p>I am a child.</p>;
}