React.memo
is a higher-order component that prevents a functional component from re-rendering unless its props change.
import React from 'react';
const ChildComponent = React.memo(({ name }) => {
console.log('Rendering ChildComponent');
return <div>Hello, {name}!</div>;
});
function ParentComponent() {
const [count, setCount] = useState(0);
return (
<div>
<ChildComponent name="John" />
<button onClick={() => setCount(count + 1)}>Increment Count</button>
<p>Count: {count}</p>
</div>
);
}