Заметки про React(@ru_react_notes). Упускаемый из виду фактор оптимизации производительности в React Когда идет речь о производительнос

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

function App() {
  return (
    <Parent>
      <Child />
    </Parent>
  );
}

function Parent({children}) {
  const [stateA, dispatchA] = useReducer(reducerA, initialStateA);

  return (
    <div className="parent">
      <Context.Provider value={[stateA, dispatchA]}>{children}</Context.Provider>
    </div>
  );
}

В примере выше при каждом повторном рендере Parent будет происходить повторный рендер потребителей контекста, т.к. изменилась ссылка на значение. Самый легкий способ это исправить - это обернуть значение в useMemo. Однако это избыточно для компонентов в верху дерева компонентов. В примере выше Parent находится в самом верху дерева и выше него нет других компонентов, которые могли бы спровоцировать повторный рендер. Таким образом использование функции useMemo в примере выше бесполезна. https://www.zhenghao.io/posts/top-level-perf