memo lets you skip re-rendering a component when its props are unchanged.

Wrap a component in memo to get a memoized version of that component. This memoized version of your component will usually not be re-rendered when its parent component is re-rendered as long as its props have not changed. But React may still re-render it: memoization is a performance optimization, not a guarantee.

import { memo } from 'react';
const SomeComponent = memo(function SomeComponent(props) {  // ...});