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

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

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

constC=()=><div/>;constB=()=><C/>constA=()=><B/>;constApp=()=>{return<A/>;}

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

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

exportfunctionmemo(type,compare){constelementType={$$typeof:REACT_MEMO_TYPE,type,compare:compare===undefined?null:compare,};returnelementType;}

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

constprevProps=currentChild.memoizedProps;// Default to shallow comparisonletcompare=Component.compare;compare=compare!==null?compare:shallowEqual;if(compare(prevProps,nextProps)&&current.ref===workInProgress.ref){returnbailoutOnAlreadyFinishedWork(current,workInProgress,renderLanes);}

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

constC=()=><div/>;constB=()=><C/>constA=React.memo(()=><B/>);constApp=()=>{return<A/>;}

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

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

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

Credits: foto by Oskar Yildizhttps://unsplash.com/photos/gy08FXeM2L4