Упускаемый из виду фактор оптимизации производительности в ReactКогда идет речь о производительности компонента, необходимо учитывать его положение в дереве компонентов.
Многие люди иногда любят искать простые ответы на проблемы, с которыми они сталкиваются. Для большинства проблем довольно легко прийти к общему решению, но в этом случае мы не учитываем крайние случаи. В случае с производительностью React приложений, одним из этих крайних случаев является позиция компонента в дереве компонентов.
Наверняка вы знаете поведение рендера при использовании контекста: при изменении значения контекста компонент-потребитель будет отрендерен заново (проверка происходит по ссылке).
function App() {
return (
);
}
function Parent({children}) {
const [stateA, dispatchA] = useReducer(reducerA, initialStateA);
return (
{children}
);
}
В примере выше при каждом повторном рендере Parent будет происходить повторный рендер потребителей контекста, т.к. изменилась ссылка на значение. Самый легкий способ это исправить - это обернуть значение в useMemo. Однако это избыточно для компонентов в верху дерева компонентов. В примере выше Parent находится в самом верху дерева и выше него нет других компонентов, которые могли бы спровоцировать повторный рендер. Таким образом использование функции useMemo в примере выше бесполезна.
https://www.zhenghao.io/posts/top-level-perf
