#reactmemo — Public Fediverse posts

Заметки фром реакт документейшен | React: грабли, о которые я спотыкалась. Часть 1

React я использую совсем недавно и вообще я бэкенд разработчик, но жизнь завела меня во фронтенд. Получилось так, что времени на обучение и курсы у меня не было, пришлось обучаться прямо в процессе. Мой принцип был "работает и ладно", но принципы нормального фронтенда явно отличались. Шишек я набила знатных с точки зрения чистоты и логики кода. Это статья для таких же новичков, как я. Представляю вам сборник граблей, о которые я спотыкалась сама, и решений к этим граблям, которые родились после нескольких часов дебага и внимательного изучения документации (спустя пол года во фронтенде пора бы, да?)

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

#React #useState #useEffect #useCallback #useMemo #useRef #Reactmemo #StrictMode #Concurrent_Mode #фронтенд

Практическая оптимизация 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 #Оптимизация