Сегодня хочу поговорить про типичную боль React-разработчиков - лишние ререндеры.
Сегодня хочу поговорить про типичную боль 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