Сегодня хочу поговорить про типичную боль React-разработчиков - лишние ререндеры.

Я регулярно вижу код, где приложение «тормозит», хотя логика простая. В 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