🔥 Избыточный ререндер из-за анонимных функций

➕ В компоненте на каждый рендер создаются новые функции (onClick={() => …})

➕ Из-за этого дочерние компоненты получают новые пропсы и ререндерятся без причины

➕ Решение — вынести коллбэк наружу или обернуть в useCallback

⌨️ Рекомендации:

— Не создавайте функции прямо в JSX

— Используйте useCallback при передаче хендлеров в дочерние компоненты

— Особенно критично для списков и больших UI

🐸 Библиотека фронтендера

#hotfix #react

🔗 Подборка свежих статей

1⃣ Создаем иммерсивную трехмерную визуализацию погоды

Пошаговое руководство по симуляции солнца, дождя, снега и грозы в интерактивном трехмерном приложении для прогноза погоды.

2⃣ Почему @starting-style не заменит keyframes

Автор показывает, что за красивым синтаксисом скрываются подводные камни специфичности и неожиданные баги, из-за которых старые добрые keyframes по-прежнему оказываются надёжнее.

3⃣ Почему исходный код TypeScript усеян var-ами

🐸 Библиотека фронтендера

#read_watch #react #js #ts

🔑 Ключ, который ломал всё

Иногда одна мелочь рушит весь интерфейс. Компонент внезапно сбрасывает состояние и анимации — а виноват всего один key. Раньше использовался Math.random(), и React каждый раз считал, что элементы новые.

В итоге он пересоздавал их с нуля — с потерей состояния и лагами.

Как решить проблему:

➖ Дать каждому элементу стабильный и уникальный ключ — например, item.id. Теперь React спокойно обновляет только то, что реально изменилось.

💡 Меньше перерендеров, плавнее UI и спокойная жизнь фронтендера.

🐸 Библиотека фронтендера

#hotfix #react

😶 Когда каждый onClick — минус FPS

Кажется, что всё просто: список, onClick — готово. Но при сотнях элементов каждый ререндер создаёт новые функции в JSX.
React считает их изменёнными и перерисовывает даже те строки, что не менялись.

На демо — незаметно. На проде — больно.

🔤 Почему это работает:

Каждый ререндер создаёт новые колбэки → React считает пропы изменёнными → перерисовывает.

useCallback стабилизирует ссылку, и компонент больше не «дёргается» без причины.

🔤 На проде:

— Если список огромный — рендерьте только видимую часть (react-window, react-virtualized).

— Если элемент сложный — выносите его в memo-компонент с передачей колбэка через пропсы.

🐸 Библиотека фронтендера

#hotfix #react