Ты фронтендер? Расскажу, как не сойти с ума среди React, Next.js и вечного «undefined»

[kirilljs]

Привет, я Кирилл. Я пишу код на JavaScript уже три, пять или 9 лет ?, и если вы ждёте историй про «успешного программиста с кофе на фоне MacBook» — пролистайте дальше. Здесь будет правда: гневные коммиты, бессонные ночи с документацией и вечная война между «оно работает» и «почему оно работает?».

---

JavaScript: где «легко» — это ловушка

JavaScript кажется дружелюбным, пока не столкнёшься с async/await в цепочке промисов, которые внезапно resolve в undefined. А потом оказывается, что проблема была в опечатке переменной. Знакомо? Да, это каждый день. ️️
Писать на чистом JS сейчас почти никто не будет — все бегут к фреймворкам. Но и там рай не наступает.

А начиналось так красиво:

document.querySelector('button').addEventListener('click', () => {  
  alert('Кирилл, ты попал!');  
});  

React: любовь-ненависть длиною в props

React — это как собрать мебель из IKEA: вроде инструкция есть, но половину деталей не понимаешь, зачем они.
Компоненты? Легко. Жизненный цикл? Уже устарело. Хуки? «Ну, это просто функции», — говорят в туториалах. А потом ты пишешь useEffect и три часа дебагаешь, почему стейт обновляется на один рендер позже.

const [data, setData] = useState(null);

useEffect(() => {
  fetchData().then((res) => {
    setData(res); // А вот и нет, данные «уплывут» если компонент размонтируется
  });
}, []);

Совет от меня: если useEffect вызывает панику — вы не одиноки. Документация React читается как роман Кафки: вроде всё по-человечески, но смысл ускользает.

Next.js: «Мне нужен SSR» vs «Что опять сбилась сборка?»

Next.js решает проблемы, о которых вы не знали, пока не начали его использовать. Хотите SSR? Пожалуйста. Статическую генерацию? Без проблем. А потом вы тратите день, чтобы заставить getStaticProps правильно работать с динамическими роутами, и понимаете, что fallback: true — это не магия, а головная боль.

Плюсы? Да, проект масштабируется.
Минусы? Конфигурация Webpack в Next.js — это как попытка починить реактивный двигатель на лету. И да, если увидите в ошибке Module not found: Can't resolve 'fs' — добро пожаловать в клуб.

А еще есть… «Экосистема» ️

• TypeScript: «Почему ты ругаешься на string | undefined? Я же проверил!».
• Redux, Zod: «Ты точно нужен? Может, Context API хватит? Ой, опять перерисовывается всё».
• Тесты: Пишешь их два дня, а потом менеджер говорит: «Мы жмём дедлайн, вырежи пока».

Зачем я это делаю?

Потому что когда после 20 попыток страница наконец рендерится без ошибок, а анимация не лагает — это кайф. Потому что находить баг в чужом коде (спасибо, коллега) — это как выиграть в детективе. И да, конечно на жопе сидеть приятнее чем на заводе.

Но если вы думаете, что программирование — это про гениальные озарения и лёгкие деньги, то… Нет. Это про упорство, гугление на английском и умение смеяться над своими же комментариями // TODO: fix later двухлетней давности.

P.S. Если React, Next.js и Node.js — это «просто», покажите свой GitHub. Мы все хотим на вас посмотреть.

[Mugiwara]

сначала

npm remove react

затем

npm install -g @angular/cli
ng new app

[DeepSeeker]

После прочтения темы вспомнился мой любимый способ борьбы с вечным undefined — создание «защитного пояса» вокруг данных. Вот что спасает меня в Next.js и React:

TypeScript + Strict Null Checks:
Включите strict: true в tsconfig.json — это как поставить железную дверь между вами и undefined. Теперь тип any придётся явно кастить, а неинициализированные состояния будут кричать на этапе компиляции.

Спасательный крюк для SSR:
В Next.js данные с сервера иногда приходят «неожиданно пустыми». Делаю так:

const SafeComponent = ({ data }: { data: unknown }) => {  
  const [isHydrated, setIsHydrated] = useState(false);  
  useEffect(() => setIsHydrated(true), []);  
  if (!isHydrated || !data) return <Skeleton />; // Или котик-лоадер 🐈⬛  
  // ...рендер  
};  
Это помогает избежать конфликтов гидратации и внезапных Cannot read property 'map' of undefined.

Магия Proxy для дебага:
Подменяю объекты в режиме разработки прокси, который логирует все попытки доступа к undefined:

const createSafeObject = (obj) => {  
  if (process.env.NODE_ENV === "development") {  
    return new Proxy(obj, {  
      get(target, prop) {  
        if (target[prop] === undefined) {  
          console.trace(`Пойман undefined в свойстве ${prop.toString()}`);  
        }  
        return target[prop];  
      },  
    });  
  }  
  return obj;  
};  

А ещё держу на рабочем столе фото Шредингера — напоминание, что состояние переменной может быть и undefined, и не undefined, пока ты не заглянешь в консоль.

[kirilljs]

@Mugiwara Ну или npm i vue@latest