Оптимизация React Context шаг за шагом в 4 примерах

При использовании компонентов React в сочетании с Context вы можете оптимизировать рендеринг, обернув ваш компонент React в React.memo сразу после поставщика контекста. Это позволит избежать ненужных повторных рендеров.

Вот несколько примеров того, как повторное отображение работает с Context:

Пример 1:

// App (ContextProvider) > A > B > C

const App = () => {
return (
   <AppContext.Provider>
     <ComponentA />
   </AppContext.Provider>
 );
};

const ComponentA = () => <ComponentB />;
const ComponentB = () => <ComponentC />;
const ComponentC = () => null;

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

Пример 2:

Чтобы предотвратить повторное отображение всех компонентов ComponentA, ComponentB и ComponentC при повторном отображении компонента App, вы можете использовать React.memo следующим образом:

// App (ContextProvider)

const App = () => {
return (
   <AppContext.Provider>
     <ComponentA />
   </AppContext.Provider>
 );
};

const ComponentA = React.memo(() => <ComponentB />);
const ComponentB = () => <ComponentC />;
const ComponentC = () => null;

Пример 3:

// App (ContextProvider) -> C

const App = () => {
  const value = {a: 'hi', b: 'bye'};
  return (
    <AppContext.Provider value = {value}>
      <ComponentA />
    </AppContext.Provider>
  );
};

const ComponentA = React.memo(() => <ComponentB />);
const ComponentB = () => <ComponentC />;
const ComponentC = () => {
  const contextValue = useContext(AppContext);
  return null;
};

В этом примере, несмотря на то, что значение провайдера не меняется, компонентС перерисовывается. Это происходит потому, что в JavaScript истинно следующее утверждение:

{a: 'hi', b: 'bye'} !== {a: 'hi', b: 'bye'}.

Пример 4:

Проблема в примере 3 может быть решена с помощью хука useMemo из React следующим образом.

// App (ContextProvider)

const App = () => {
  const a = 'hi';
  const b = 'bye';
  const value = useMemo(() => ({a, b}), [a, b]);

  return (
    <AppContext.Provider value = {value}>
      <ComponentA />
    </AppContext.Provider>
  );
};

const ComponentA = React.memo(() => <ComponentB />);
const ComponentB = () => <ComponentC />;
const ComponentC = () => {
  const contextValue = useContext(AppContext);
  return null;
};

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

App (ContextProvider)

Это приводит к желаемому результату, позволяя избежать ненужного повторного рендеринга ComponentC. Благодаря использованию useMemo гарантируется одинаковая ссылка на объект для переменной value. Поскольку этой переменной присваивается значение провайдера, контекст определяется как неизменный, и потребители не уведомляются.

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