Практическая оптимизация React: ререндеры, Context, списки, INP и code splitting

Оптимизация в React почти всегда сводится к двум факторам: объёму работы, которую выполняет JavaScript, и частоте (а также «стоимости») перерисовок компонентов. Сам React работает достаточно быстро, но в крупных интерфейсах даже небольшие архитектурные промахи и на первый взгляд безобидные ререндеры начинают заметно бить по производительности. В данной статье мы расскажем про ключевые подходы к оптимизации React-приложений: как уменьшить количество лишних ререндеров, сократить объём вычислений при вводе и скролле и снизить нагрузку стартового JavaScript.

https://habr.com/ru/articles/978624/

#React #оптимизация #производительность #ререндер #INP #Core_Web_Vitals #React_Profiler #Reactmemo

signals в качестве альтернативы useState в React

Привет, хабр! Больше года назад я впервые узнал про сигналы , а три месяца назад @Sin9k записал видео на эту тему. И поскольку сигналы по-прежнему обходят стороной, попробую немного исправить ситуацию) В материале будет использоваться обёртка signals-react , так как изначально рассматриваемая библиотека написана под Preact.

https://habr.com/ru/articles/892730/

#react #signals #reactmemo

Взгляд с другой стороны на useMemo, useCallback и React.memo в React: когда их стоит использовать

Оптимизация производительности React приложений — важная часть разработки, особенно когда речь идет о сложных интерфейсах. В основном разработчики лишь краем уха слышат о необходимости использования хуков useMemo, useCallback и React.memo для оптимизации кода. Но если бездумно использовать их, то можно даже навредить вашему приложению В этой статье я попытаюсь разобрать, когда действительно стоит использовать useMemo, useCallback и React.memo, а когда их использование излишне. Мы изучим каждый из хуков, их влияние на рендеринг компонентов в React, а также рассмотрим практические примеры с подробными объяснениями работы каждого из хуков.

https://habr.com/ru/articles/871712/

#React #JavaScript #useMemo #useCallback #Reactmemo #Оптимизация