7 ошибок в React, из-за которых UI тормозит даже на простых экранах

7 ошибок в React, из-за которых UI тормозит даже на простых экранах

Чаще всего проблема не в React как таковом, а в лишних рендерах и тяжёлых пропсах. Если компонент «мигает» при каждом вводе, значит вы тащите в него слишком много состояния.

— Держите локальное состояние как можно ближе к месту использования, а не в одном общем сторе.
— Не передавайте вглубь новые объекты и функции на каждом рендере без нужды.
— Массивы для map/filter/sort лучше мемоизировать, если они дорогие.
— Списки рендерьте с нормальными key, иначе React начнёт переиспользовать не те узлы.
— Не делайте вычисления в JSX, если их можно вынести в useMemo или в подготовку данных.

Ещё одна частая ловушка — «безобидные» эффекты. Если useEffect обновляет state после каждого рендера, вы получаете цикл, который видно только в нагрузке. Плюс тяжёлые дочерние компоненты стоит резать через memo не ради красоты, а когда реально есть стабильные пропсы.

Если экран чувствуется медленным, сначала ищите лишний рендер, потом — лишнюю работу в рендере, и только после этого лезьте в архитектуру.