На тему мемоизации написано довольно много статей, и все они хорошо раскрывают суть. Но мне часто не хватало шпаргалки, которую можно отправить на вопрос «А как мемоизировать?». В статье речь пойдет исключительно о функциональных компонентах.

Жизненный цикл компонента

Функциональный компонент — это обычная JavaScript-функция, и часто при обсуждении, когда говорят «компонент рендерится», имеют в виду само выполнение этой функции.

При создании компонента, когда функция выполняется впервые, говорят, что компонент «рендерится». А когда в компоненте что-то изменилось, то говорят, что компонент «перерендеривается».

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

Когда компонент будет перерендерен?

Есть всего несколько сценариев, когда компонент будет перерендерен:

• Изменилось значение в useState, useReducer.

• Изменился контекст, а наш компонент потребляет этот контекст через useContext.

• Перерендерился родитель.

Как бороться?

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

Как бороться с useState/useReducer?

Если компонент перерендеривается из-за изменений значения в useState (или useReducer), то скорее всего, с таким перерендером не нужно бороться, так как новое значение нужно показать пользователю.

Пример, когда значение нам нужно сразу показать:

const CounterComponent = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <div>{count}</div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

Но если мы не используем значение, а только где-то храним, то от лишних перерендеров можно избавиться с помощью useRef:

❌ Плохой пример, в котором будут лишние перерендеры:

const CounterComponent = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={() => alert(count)}> Show count </button>
    </div>
  );
};

✅ Хороший пример, в котором лишних перерендеров не будет:

const CounterComponent = () => {
  const countRef = useRef(0);

  return (
    <div>
      <button onClick={() => countRef.current++}>Increment</button>
      <button onClick={() => alert(countRef.current)}> Show count </button>
    </div>
  );
};

Как бороться с useContext?

Когда компонент использует useContext, могут быть такие-же проблемы перерендера, как и в случае useState/useReducer.

Один из способов борьбы - использовать useRef. Но часто, проблема может быть в том, что например, контекст - это большой объект, и в нем много данных:

const BigContext = React.createContext({
  field1: 1,
  field2: 2,
  field3: 3,
  field4: 4,
  field5: 5,
});

const Parent = () => {
  const [state, setState] = useState({
    field1: 1,
    field2: 2,
    field3: 3,
    field4: 4,
    field5: 5,
  });

  return (
    <BigContext.Provider value={state}>
      <Child />
    </BigContext.Provider>
  );
};

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

Как бороться с перерендером из-за родителя?

В React, если родитель перерендерился, то будет перерендерен и дочерний компонент.

Например:

const ParentComponent = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <div>{count}</div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <ChildComponent />
    </div>
  );
};

const ChildComponent = () => {
  return <div />;
};

Как только мы нажмем на кнопку, то перерендерится ParentComponent, а с ним и ChildComponent. Но это же опасно, ведь если перерендерится корневой компонент, например App, то он перерендерит все дерево компонентов.

В борьбе с таким видом перерендера, нам поможет memo:

const ParentComponent = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <div>{count}</div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <ChildComponent />
    </div>
  );
};

const ChildComponent = memo(() => {
  return <div />;
});

А работает memo следующим образом:

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

Мы разобрали способы борьбы со всеми видами перерендеров. Но про memo хочется добавить несколько примеров.

Рассмотрим пример:

const ParentComponent = () => {
  const [count, setCount] = useState(0);

  const onButtonClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <div>{count}</div>
      <ButtonComponent onClick={onButtonClick} />
    </div>
  );
};

const ButtonComponent = memo(({ onClick }) => {
  return <button onClick={onClick}>Click me!</button>;
});

Как только будет нажата кнопка, счетчик изменится, и компонент ParentComponent будет перерендерен. А будет ли перерендерен ButtonComponent? Так как он завернут в memo, сначала будет проверено, изменились ли пропсы. Так как у нас onButtonClick каждый раз создается заново, это означает, что пропсы при сравнении будут разные.

Для этого можно использовать useCallback.

const onButtonClick = useCallback(() => {
  setCount(count + 1);
}, []);

Но так, count всегда будет равен нулю, потому что в этом случае, у нас useCallback запомнит первую переданную функцию, и у этой функции лексическое окружение тоже запомнится (иначе говоря замкнется). И тогда count в этой функции будет всегда равен нулю.

Это поведение можно исправить так:

const onButtonClick = useCallback(() => {
  setCount((c) => c + 1);
}, []);

Но что, если нам нужно делать в функции другие действия, связанные с переменной, например:

const onButtonClick = useCallback(() => {
  console.log(count);
}, []);

Тогда снова сталкиваемся с проблемой, когда count остается равным нулю.

Мы можем избавиться от проблемы, указав count в зависимостях:

const onButtonClick = useCallback(() => {
  console.log(count);
}, [count]);

Но тогда, при изменении count-а в onButtonClick будет новая функция, и тогда теряется вся полезность от useCallback.

Решить это можно так:

const countRef = React.useRef(count);
countRef.current = count;
const onButtonClick = useCallback(() => {
  console.log(countRef.current);
}, []);

Мы создаем ref, и на каждом перерендере в него сохраняем актуальное значение count-а. И теперь, onButtonClick всегда будет иметь доступ к актуальному значению, и мы получаем преимущество мемоизации, onButtonClick - всегда одна и та же функция.

Но выглядит это костыльно, и если переменных много, придется создавать много ref-ов.

А что если в ref писать не значение, а саму функцию, с ее лексическим окружением?

Кастомный хук useCallbackRefed

Можно использовать такой кастомный хук, который дает нам прелести мемоизации функции, и одновременно у нас всегда актуальные значения:

const useCallbackRefed = (callback) => {
  const ref = useRef(callback);
  ref.current = callback;

  return useCallback((...args) => {
    return ref.current(...args);
  }, []);
};

Пример использования хука:

const onButtonClick = useCallbackRefed(() => {
  console.log(count);
});

А еще, коллбэк, завернутый в этот хук можно безопасно использовать в useEffect, ведь функция всегда одна и та же, а значение count всегда будет в ней актуальное:

const listener = useCallbackRefed(() => {
  console.log(count); // Всегда актуально!
});

useEffect(() => {
  if (!ref.current) {
    return;
  }

  ref.current.addEventListener("mouseover", listener);
  return () => {
    ref.current.removeEventListener("mouseover", listener);
  };
}, []);

Выводы

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

А как мы знаем, преждевременная оптимизация — корень всех зол.