⚛️ React 19.2 — что нового

Свежий релиз уже на npm.

Главные фишки:

<Activity /> — новый способ управлять частями приложения (видимые/скрытые активности, предзагрузка скрытых страниц).

useEffectEvent — решение для «ивентов» внутри эффектов без лишних перезапусков.

cacheSignal — для React Server Components, помогает правильно завершать кэшированные запросы.

Performance Tracks — новые треки в Chrome DevTools для анализа производительности.

Partial Pre-rendering — частичный пререндеринг: статику можно отдать с CDN, а динамику дорисовать позже.

📌 Плюс: обновлён eslint-plugin-react-hooks v6, поддержка Web Streams в SSR и мелкие багфиксы.

🔗 Подробности — в блоге React

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

#stack #react

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

➕ В компоненте на каждый рендер создаются новые функции (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