Я регулярно вижу код, где приложение «тормозит», хотя логика простая. В 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⚠️ Важно: оптимизация, это не рефлекс, а осознанный шаг. Сначала простота, потом скорость.
📲 Мы в MAX
✍️ @React_lib