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

Иногда одна мелочь рушит весь интерфейс. Компонент внезапно сбрасывает состояние и анимации — а виноват всего один 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