Зачем нужен Flow

А, ну это ж про тот самый гитхабовский issue, который у всех в проектах всплывает, как геморрой после острого! Слушай сюда, история классическая до безобразия.

Вот сидит чувак, пишет себе код, всё вроде норм. А потом — бац! — и вылезает какая-нибудь дичь, типа Uncaught TypeError: Cannot read properties of undefined (reading 'map'). И ты такой: "Какого хуя?" Только вчера всё работало, а сегодня уже нет. Подозрение ёбучу чувствую — кто-то что-то накосячил.

Начинаешь копать. Смотришь историю коммитов, а там твой коллега, пидарас шерстяной, зачем-то "пофиксил" твой компонент. Открываешь дифф и видишь, что он, мудя, просто взял и закомментил проверку на null, потому что ему "мешало в консоли". Ну просто ебать копать! Терпения ноль, ёпта.

И вот ты уже сидишь, пишешь ему в слак: "Чувак, ты веришь, что твой 'фикс' сломал половину дашборда?" А он тебе: "Ой, извини, не подумал". Да похуй, что не подумал! Теперь мне эту хитрожопую ситуацию расхлёбывать. Волнение ёбаное — продакшн-то уже накрылся медным тазом.

Самое пиздецкое, что баг плавающий. Воспроизводится не всегда. То работает, то — хоба! — и снова undefined. Удивление пиздец. Сидишь, дебажишь, а в голове одна мысль: "Э, сабака сука, где же ты спрятался?" Перебираешь все возможные сценарии, пока не понимаешь, что проблема в асинхронности. Данные приходят позже, чем компонент пытается их отрендерить. Э, бошка, думай!

И вот решение, которое в итоге выручает:

const MyComponent = ({ data }) => {
  // Простая, но жизненно необходимая проверка
  if (!data || !data.items) {
    return <div>Загружаем, блядь, подожди...</div>;
  }

  return <div>{data.items.map(item => <span key={item.id}>{item.name}</span>)}</div>;
};

Вот и вся магия. Иногда нужно просто остановиться и подумать, а не комментировать код, как последний распиздяй. А то получается история про Гамлета: "Быть или не быть?" — а в контексте JS это "Быть null или не быть?". Вот и весь философский вопрос. Главное — не послать на хуй весь код, а разобраться. Хотя иногда очень хочется.