Когда нужен React.memo?

Когда нужен React.memo?

Компонент обновляется (перерисовывается), когда меняется его состояние. Когда обновляется компонент, обновляются все его дочерние компоненты и рекурсивно дочерние компоненты дочерних компонентов.

Компонент может иметь глубокую вложенность дочерних компонентов:

const C = () => <div />; const B = () => <C /> const A = () => <B />; const App = () => { return <A />; } 

В примере выше, при обновлении компонента App произойдет обновление всех вложенных компонентов: A, B и C.

Обновление всех дочерних компонентов может быть нежелательно - если у компонента не меняется состояние и пропсы, то и обновлять его не надо. Обновление компонента можно остановить с помощью React.memo (мемо). Мемо создает элемент, который ссылается на мемоизируемый компонент и содержит функцию сравнения пропсов для этого компонента:

export function memo(type, compare) { const elementType = { $$typeof: REACT_MEMO_TYPE, type, compare: compare === undefined ? null : compare, }; return elementType; } 

При обновлении компонентов, React распознает мемо и вызывает функцию compare чтобы определить изменились ли пропсы, если нет — можно пропустить обновление:

const prevProps = currentChild.memoizedProps; // Default to shallow comparison let compare = Component.compare; compare = compare !== null ? compare : shallowEqual; if (compare(prevProps, nextProps) && current.ref === workInProgress.ref) { return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes); } 

Возвращаясь к первому примеру, обернем компонент A в мемо:

const C = () => <div />; const B = () => <C /> const A = React.memo(() => <B />); const App = () => { return <A />; } 

Теперь, при обновлении App, компонент A и его вложенные компоненты обновляться не будут, так как их пропсы не изменяются.

Использование мемо даст результат, если:

• компонент перерисовывается (обновляется) часто с одними и теми же пропсами.
• обновление компонента дорогое, например, когда у компонента большая вложенность дочерних компонентов.

Credits: foto by Oskar Yildiz https://unsplash.com/photos/gy08FXeM2L4