🔥 Проп-спрединг без фильтрации

На картинке 3 ситуации:

➡️ Передали ...props в корневой <div> → в DOM улетают лишние атрибуты

➡️ Поймали warning в консоли и начали гадать откуда он

➡️ Правильный вариант → деструктурируем нужные props и явно прокидываем

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

— Никогда не спредьте всё подряд в корень

— Лишние атрибуты → лишние баги

— Чётко указывайте только то, что действительно нужно в DOM

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

#hotfix #react

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

1️⃣ $220K в месяц на рендеринге JavaScript

История Prerender — как простой сервис для индексации JS-сайтов вырос в SaaS с органическим ростом и стабильной выручкой.

2️⃣ «Фулстек JavaScript: Секреты для миддлов»

Обзор книги Милесии МакГрегор: переход от middle к senior, работа с legacy, архитектурные решения в NestJS и React, DevOps-подходы и важность soft-skills.

3️⃣ SolidJS под капотом: для React-разработчиков

Перевод статьи о том, как работает реактивная библиотека без виртуального DOM: сигналы, эффекты, прокси-хранилища и ловушки вроде деструктуризации пропсов.

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

#read_watch #js #react

⚛️ 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

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

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

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

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

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

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

🔤 На проде:

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

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

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

#hotfix #react

😱 Баг, который пропускают даже опытные разработчики

Казалось бы, простой условный рендеринг. Но вот вам сюрприз.

Когда items пустой массив, items.length равен 0. В JavaScript 0 — это falsy значение, поэтому выражение 0 && <ul> вернет 0.

React рендерит числа, поэтому на экране появится цифра 0!

✅ Правильный вариант:

function ProductList({ items }) {
  return (
    <div>
      <h2>Товары</h2>
      {items.length > 0 && <ul>
        {items.map(item => <li key={item.id}>{item.name}</li>)}
      </ul>}
    </div>
  );
}

Или еще лучше:

{!!items.length && <ul>...</ul>}

Или тернарный оператор:

{items.length ? <ul>...</ul> : null}


💡 Почему так происходит:

Оператор && возвращает первое falsy значение или последнее truthy:

0 && <Component /> → вернет 0 (React рендерит!)

false && <Component /> → вернет false (React не рендерит)

true && <Component /> → вернет <Component />

React не рендерит: false, null, undefined, true

React рендерит: числа (0, 1, -1), строки, компоненты

❗️ Оператор && используйте только с boolean значениями, а не с числами.

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

#hotfix #react

🔗 Что почитать

⏺ Rust вместо React: как я написал Telegram WebApp SDK

Эксперимент разработчика, который переписал фронт для Telegram-ботов на Rust и разобрался, где язык реально выигрывает у JS.

⏺ Frontend Security: The Most Ignored Skill Every Developer Needs in 2025

Medium-разбор, почему XSS, CSP и supply-chain атаки всё ещё ломают SPA, и как встроить безопасность в CI/CD.

⏺ Почему Google Переводчик «ломает» React (и другие веб-приложения)

Автор показывает реальные кейсы, обходные пути и поднимает важный вопрос: имеет ли фреймворк право на полный контроль над DOM?

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

#read_watch #react #js #ts

😱 React-баг, который ловят не все

Кажется, простой счётчик — но React со своим batching (см. на картинке).

Ждём ➕ 2 Получаем ➕ 1

💡 Почему так:

React группирует (batch) обновления состояния внутри одного события. Обе строки читают старое значение count из замыкания, поэтому результат — 1.

✅ Решение:

Если новое состояние зависит от предыдущего — используйте функциональное обновление 🔜

setCount(prev => prev + 1);
setCount(prev => prev + 1);
Теперь результат будет 2.

React работает по снимкам состояния, а не по «живым» переменным — и именно это часто сбивает с толку.

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

#hotfix #react