Я регулярно вижу код, где приложение «тормозит», хотя логика простая. В 80% случаев причина банальна: компоненты перерисовываются без необходимости.
Что я проверяю в первую очередь
1️⃣ props меняются по ссылке
<Component data={{ a: 1 }} />
Каждый рендер - новый объект → новый ререндер.
Решение:
useMemo.2️⃣ функции создаются заново
onClick={() => doSomething()}
Если компонент обёрнут в
memo - он всё равно будет ререндериться.Решение:
useCallback.3️⃣ memo используется «для галочки»
React.memo без анализа - зло.Если props всегда новые →
memo бесполезен и даже мешает.4️⃣ state лежит слишком высоко
Когда
useState в родителе, а нужен только одному дочернему компоненту - привет лишним обновлениям.Мой личный чек-лист
💚 Сначала DevTools → Highlight updates
💚 Потом проверяю ссылки
💚 И только в конце -
memo, useMemo, useCallback⚠️ Важно: оптимизация, это не рефлекс, а осознанный шаг. Сначала простота, потом скорость.
✍️ @React_lib