How do you prevent a component from re-rendering when its parent re-renders but its own props haven’t changed?

Question

React Developer — Medium

How do you prevent a component from re-rendering when its parent re-renders but its own props haven’t changed?

Accepted Answer

To prevent a component from re-rendering when its parent does, wrap the functional component with React.memo(). This higher-order component memoizes the component, only re-rendering if its props change.