React hooks, как не выстрелить себе в ноги. Часть 3.1: мемоизация, memo

Статья про мемоизацию оказалась объёмной и включает в себя разбор hoc memo, хуки useMemo и useCallback, затрагивает тему useRef. Было принято решение разбить статью на 2 части, в первой части разберем когда нужно и когда ненужно использовать memo, какое у него api, какие проблемы решает. Во второй части разберем хуки useMemo, useCallback, а также некоторые проблемы этих хуков, которые можно решить с помощью useRef.

В прошлых статьях мы разбирали как работать с useState и с useEffect. Знаем: код компонента будет выполняться каждый раз при его обновлении. Отсюда возникает проблема — данные и сложные вычисления будут теряться, также будет происходить лишнее обновление дочерних компонентов. Эти проблемы решает хук useMemo и обертка над ним useCallback, но оба работают в связке с memo hoc.

Как работать с memo

memo — это high order component или компонент высшего порядка.

Компонент высшего порядка — это функция, которая принимает компонент и возвращает его улучшенную версию.

В данном случае, memo — это функция, которая принимает react компонент, а возвращает react компонент, который будет обновляться только если его предыдущие пропсы не равны новым пропсам.

В примере ниже компонент MemoChild будет смонтирован/размонтирован в момент монтирования/размонтирования родителя, но не будет обновляться в момент обновления родителя.

import React, { useState, FC, memo } from "react";  export const MemoChild = memo(() => {   return (     <div>     Я никогда не буду обновляться     </div> ); });  export const Child: FC = () => {   return (     <div>     Я буду обновляться всегда, когда обновляется родитель </div> ); };  export const Parent: FC = () => {   const [state, setState] = useState<boolean>(true);   return (     <div>     <Child /> <MemoChild />       <button onClick={() => setState(v => !v)}>click</button> </div> ); };

MemoChild не принимает никаких пропсов, поэтому не будет обновляться при обновлении родителя. memo обновит компонент только когда предыдущие пропсы не равны текущим.

На языке typescript memo выглядит так:

function memo<P extends object>(         Component: SFC<P>,         propsAreEqual?: (prevProps: Readonly<PropsWithChildren<P>>, nextProps: Readonly<PropsWithChildren<P>>) => boolean     ): NamedExoticComponent<P>;

Обратите внимание, memo принимает 2 аргумента: компонент и функцию propsAreEqual (пропсы равны?). Также является дженериком и принимает тип пропсов компонента
P extends object.

Зачем нужна propsAreEqual? Взглядите на код ниже и скажите, будет ли обновляться MemoChild при обновлении родителя?

import React, { useState, FC, memo } from "react";  type MemoChildProps = { test: { some: string }; }  export const MemoChild = memo<MemoChildProps>(() => {   return (     <div>     По идее я никогда не буду обновляться     </div> ); });  export const Parent: FC = () => {   const [state, setState] = useState<boolean>(true);   return (     <div> <MemoChild test={{ some: 'Я некий ссылочный тип данных' }} />       <button onClick={() => setState(v => !v)}>click</button> </div> ); };

Компонент MemoChild будет обновляться при каждом обновлении родителя. memo под капотом проверяет пропсы с помощью строгого равно, в нашем случае:
prevProps.test === nextProps.test. Доверить memo сравнивать примитивы (строки, числа, булево и т.д.) можно, но ссылочные типы, такие как объект, массив, функция будут проверяться некорректно.

• 'some string' === 'some string' -> true;

• {} === {} -> false;

• [] === [] -> false;

• () => {} === () => {} -> false;

Один из способов решения проблемы — использовать второй аргумент memo, а именно propsAreEqual. Другой способ — использовать useMemo и useCallback, но об этом позже.

import React, { useState, FC, memo } from "react";  type MemoChildProps = { test: { some: string }; }  export const MemoChild = memo<MemoChildProps>(() => {   return (     <div>     Теперь я точно никогда не буду обновляться     </div> ); }, // основано на предыдущем примере (prevProps, nextProps) => prevProps.test.some === nextProps.test.some );  export const Parent: FC = () => {   const [state, setState] = useState<boolean>(true);   return (     <div> <MemoChild test={{ some: 'Я некий ссылочный тип данных' }} />       <button onClick={() => setState(v => !v)}>click</button> </div> ); };

В примере выше используем прямое сравнение известных свойств (свойство some у объекта). Однако часто мы не знает точной структуры объектов, поэтому лучше использовать универсальные решения. Я использую библиотеку fast-deep-equal, можно использовать любую другую или самописную.

export const MemoChild = memo<MemoChildProps>(() => {   return (     <div>     Теперь я точно никогда не буду обновляться     </div> ); }, (prevProps, nextProps) => deepEqual(prevProps, nextProps) );  // или  export const MemoChild = memo<MemoChildProps>(() => {   return (     <div>     Теперь я точно никогда не буду обновляться     </div> ); }, deepEqual );

Однако здесь есть одна проблема, как думаете какая? Но прежде чем рассказать о ней, нужно еще немного поговорить о memo.

memo vs shouldComponentUpdate

memo часто сравнивают с shouldComponentUpdate, оба предотвращают лишнее обновление компонентов, но чтобы предотвратить обновление один возвращает true, другой false, как запомнить?

Поможет переводчик:

• shouldComponentUpdate — «должен ли компонент обновиться?», если скажем да (вернем true) — обновится.

• propsAreEqual — «пропсы равны?», если скажем да (вернем true) — не обновится, пропсы ведь равны.  Правда propsAreEqual это утверждение, а не вопрос и я бы назвал: arePropsEqual, но суть не меняется.

Как может выглядеть memo под капотом (логика)

Мы познакомились с основным api memo. Ниже приведен возможный код memo, это поможет лучше понять как с ним правильно работать.

function memo = (Component, propsAreEqual = shallowEqual) => { let prevComponent;   let prevProps;      return (nextProps) => {     // если пропсы равны, возвращаем предыдущий вариант компонента   if (propsAreEqual(prevProps, nextProps)) {     prevProps = nextProps;       return prevComponent;     }     prevComponent = <Component {...nextProps} />;     prevProps = nextProps;     return prevComponent;   } }

Под капотом memo написан по-другому и опирается на внутреннюю логику react, тем не менее это вариант также будет и работать и демонстрирует логику работы этого компонента высшего порядка. Это академический пример и не стоит его использовать вместо memo.

Опасность propsAreEqual

Вспомните предыдущий пример, в котором в качестве propsAreEqual использовали deepEqual. Если мемоизированный компонент принимает children, может быть переполнен стек вызовов, потому что children — зачастую объект с глубоким уровнем вложенности, представляет собой все дерево дочерних компонентов react.

import React, { useState, FC, memo } from "react"; import deepEqual from "fast-deep-equal";  export const MemoChild = memo(() => { return ( <div> Я принимаю children и могу из-за этого переполнить стек вызовов </div>   ); }, deepEqual);  export const Parent: FC = () => { const [state, setState] = useState<boolean>(true); return ( <div> <MemoChild> <OtherComponent /> </MemoChild> <button onClick={() => setState(v => !v)}>click</button> </div> ); };

Можно подкорректировать решение:

import React, { useState, FC, memo } from "react"; import deepEqual from "fast-deep-equal";  export const MemoChild = memo(() => { return ( <div> Я принимаю children и могу из-за этого переполнить стек вызовов </div>   ); }, ({ children: prevChildren, ...prevProps }, { children: nextChildren, ...nextProps}) => {   if (prevChildren !== nextChildren) return false;   return deepEqual(prevProps, nextProps); } );  export const Parent: FC = () => { const [state, setState] = useState<boolean>(true); return ( <div> <MemoChild> <OtherComponent /> </MemoChild> <button onClick={() => setState(v => !v)}>click</button> </div> ); };

Раз не можем проверить children глубоко, проверим поверхностно. Но у этого решения есть еще проблема, помимо громоздкого кода. Любой react компонент превращается в объект и при каждом обновлении родителя, его дети — это новые объекты, то есть <OtherComponent /> === <OtherComponent /> -> false.

И мы плавно подошли к вопросу когда memo не имеет смысла, а значит почему это поведение не будет поведением по умолчанию.

Когда memo не имеет смыла

Если компонент принимает children, вероятно не имеет смысла его мемоизировать. Я говорю «вероятно», потому что есть один способ сохранить мемоизацию — можно дочерние компоненты мемоизировать с помощью useMemo. Это не самое чистое и довольно хрупкое решение, тем не менее мы его разберем в следующей лекции.

Если вы передаете в компонент children, стоит задуматься, а действительно ли этот компонент выполняет сложную работу и его нужно мемоизировать. Также стоит учесть, как часто будет обновляться родительский компонент, если не часто — можно отказаться от мемоизации.

import React, { useState, FC, memo } from "react"; import deepEqual from "fast-deep-equal";  export const MemoChild = memo(() => { return ( <div> Я буду обновляться всегда и отнимать ресурсы компьютера </div>   ); });  export const Child: FC = () => { return ( <div> Я буду обновляться всегда, это лучше чем не рабочая мемоизация  </div>   ); };  export const Parent: FC = () => { const [state, setState] = useState<boolean>(true); return ( <div> <MemoChild> <OtherComponent /> </MemoChild> <Child> <OtherComponent /> </Child> <button onClick={() => setState(v => !v)}>click</button> </div> ); };

Принимает компонент или нет другие компоненты в качестве children — ключевой вопрос, который подскажет нужно мемоизировать компонент или нет. Если children компонента — другие компоненты, вероятно мемоизация не имеет смысла. Также мемоизация не имеет смысла, когда имеем дело с каким нибудь простым компонентом, например стилизованной кнопкой.

Заключение

В этой статье разобрали, как работать с memo, когда нужно и когда не нужно использовать.

В следующей статье разберемся с reference и всеми инструментами для работы с ними: useRef, createRef, forwardRef, useImperativeHandle. Использование рефов — необходимое условие для эффективной работы с useMemo и useCallback.

А теперь хочу пригласить всех на бесплатный вебинар, который проведет мой коллега — Арсений Высоцкий. На вебинаре Арсений разберет изменения, которые были добавлены в React 18, и познакомит вас с ними поближе.

• Зарегистрироваться на вебинар