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

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

Когда 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

📌 Git Blame с суперсилами

Обычный git blame показывает, кто последним менял строку. Но что если код был перемещён из другого файла или отформатирован? Есть команда, которая превращает Git в настоящего детектива.

git blame -w -C -C -C src/components/Button.jsx

ℹ️ Что делает каждый флаг:

-w — игнорирует пробелы и форматирование. Если кто-то запустил prettier на весь файл, Git «видит сквозь» это изменение и показывает реального автора логики.

-C — отслеживает копирование кода в пределах одного коммита. Вынесли функцию в отдельный файл? Git покажет оригинального автора.

-C -C — ищет копирование при создании нового файла. Идеально для рефакторинга, когда код переезжает в новые модули.

-C -C -C — ищет происхождение кода во всех коммитах. Покажет источник, даже если код путешествовал между файлами несколько раз.

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

#readme #git