<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title><![CDATA[Ты фронтендер? Расскажу, как не сойти с ума среди React, Next.js и вечного «undefined»]]></title><description><![CDATA[<p dir="auto"><img src="/assets/uploads/files/1738160609015-i-resized.webp" alt="i.webp" class=" img-fluid img-markdown" /></p>
<p dir="auto">Привет, я Кирилл. Я пишу код на JavaScript уже три, пять или 9 лет ?, и если вы ждёте историй про «успешного программиста с кофе на фоне MacBook» — пролистайте дальше. Здесь будет правда: гневные коммиты, бессонные ночи с документацией и вечная война между «оно работает» и «почему оно работает?».</p>
<hr />
<h2>JavaScript: где «легко» — это ловушка</h2>
<p dir="auto"><strong>JavaScript</strong> кажется дружелюбным, пока не столкнёшься с <strong>async/await</strong> в цепочке промисов, которые внезапно <strong>resolve</strong> в <code>undefined</code>. А потом оказывается, что проблема была в опечатке переменной. Знакомо? Да, это каждый день. <img src="https://forum.exlends.ru/assets/plugins/nodebb-plugin-emoji/emoji/android/1f575.png?v=2065129af4d" class="not-responsive emoji emoji-android emoji--sleuth_or_spy" style="height:23px;width:auto;vertical-align:middle" title="🕵" alt="🕵" />️<img src="https://forum.exlends.ru/assets/plugins/nodebb-plugin-emoji/emoji/android/2642.png?v=2065129af4d" class="not-responsive emoji emoji-android emoji--male_sign" style="height:23px;width:auto;vertical-align:middle" title="♂" alt="♂" />️<br />
Писать на чистом JS сейчас почти никто не будет — все бегут к фреймворкам. Но и там рай не наступает.</p>
<p dir="auto">А начиналось так красиво:</p>
<pre><code class="language-js">document.querySelector('button').addEventListener('click', () =&gt; {  
  alert('Кирилл, ты попал!');  
});  
</code></pre>
<h2>React: любовь-ненависть длиною в props</h2>
<p dir="auto">React — это как собрать мебель из IKEA: вроде инструкция есть, но половину деталей не понимаешь, зачем они.<br />
Компоненты? Легко. Жизненный цикл? Уже устарело. Хуки? «Ну, это просто функции», — говорят в туториалах. А потом ты пишешь <code>useEffect</code> и три часа дебагаешь, почему стейт обновляется на один рендер позже.</p>
<pre><code class="language-jsx">const [data, setData] = useState(null);

useEffect(() =&gt; {
  fetchData().then((res) =&gt; {
    setData(res); // А вот и нет, данные «уплывут» если компонент размонтируется
  });
}, []);
</code></pre>
<p dir="auto"><em>Совет от меня</em>: если <code>useEffect</code> вызывает панику — вы не одиноки. Документация <strong>React</strong> читается как роман Кафки: вроде всё по-человечески, но смысл ускользает.</p>
<h2>Next.js: «Мне нужен SSR» vs «Что опять сбилась сборка?»</h2>
<p dir="auto">Next.js решает проблемы, о которых вы не знали, пока не начали его использовать. Хотите SSR? Пожалуйста. Статическую генерацию? Без проблем. А потом вы тратите день, чтобы заставить <code>getStaticProps</code> правильно работать с динамическими роутами, и понимаете, что <code>fallback: true</code> — это не магия, а головная боль.</p>
<p dir="auto"><strong>Плюсы?</strong> Да, проект масштабируется.<br />
<strong>Минусы?</strong> Конфигурация Webpack в Next.js — это как попытка починить реактивный двигатель на лету. И да, если увидите в ошибке <code>Module not found: Can't resolve 'fs'</code> — добро пожаловать в клуб.</p>
<h2>А еще есть… «Экосистема» <img src="https://forum.exlends.ru/assets/plugins/nodebb-plugin-emoji/emoji/android/1f32a.png?v=2065129af4d" class="not-responsive emoji emoji-android emoji--tornado" style="height:23px;width:auto;vertical-align:middle" title="🌪" alt="🌪" />️</h2>
<ul>
<li><strong>TypeScript</strong>: «Почему ты ругаешься на string | undefined? Я же проверил!».</li>
<li><strong>Redux</strong>, <strong>Zod</strong>: «Ты точно нужен? Может, Context API хватит? Ой, опять перерисовывается всё».</li>
<li><strong>Тесты</strong>: Пишешь их два дня, а потом менеджер говорит: «Мы жмём дедлайн, вырежи пока».</li>
</ul>
<h2>Зачем я это делаю?</h2>
<p dir="auto">Потому что когда после 20 попыток страница наконец рендерится без ошибок, а анимация не лагает — это кайф. Потому что находить баг в чужом коде (спасибо, коллега) — это как выиграть в детективе. И да, конечно на жопе сидеть приятнее чем на заводе.</p>
<p dir="auto">Но если вы думаете, что программирование — это про гениальные озарения и лёгкие деньги, то… Нет. Это про упорство, гугление на английском и умение смеяться над своими же комментариями <code>// TODO: fix later</code> двухлетней давности.</p>
<p dir="auto"><strong>P.S.</strong> Если React, Next.js и Node.js — это «просто», покажите свой GitHub. Мы все хотим на вас посмотреть.<img src="https://forum.exlends.ru/assets/plugins/nodebb-plugin-emoji/emoji/android/1f609.png?v=2065129af4d" class="not-responsive emoji emoji-android emoji--wink" style="height:23px;width:auto;vertical-align:middle" title="😉" alt="😉" /></p>
]]></description><link>https://forum.exlends.ru/topic/78/ty-frontender-rasskazhu-kak-ne-sojti-s-uma-sredi-react-next.js-i-vechnogo-undefined</link><generator>RSS for Node</generator><lastBuildDate>Sun, 31 May 2026 11:42:00 GMT</lastBuildDate><atom:link href="https://forum.exlends.ru/topic/78.rss" rel="self" type="application/rss+xml"/><pubDate>Wed, 29 Jan 2025 14:40:25 GMT</pubDate><ttl>60</ttl><item><title><![CDATA[Reply to Ты фронтендер? Расскажу, как не сойти с ума среди React, Next.js и вечного «undefined» on Mon, 03 Feb 2025 08:05:04 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="/user/mugiwara" aria-label="Profile: Mugiwara">@<bdi>Mugiwara</bdi></a> Ну или <code>npm i vue@latest</code> <img src="https://forum.exlends.ru/assets/plugins/nodebb-plugin-emoji/emoji/android/1f476.png?v=2065129af4d" class="not-responsive emoji emoji-android emoji--baby" style="height:23px;width:auto;vertical-align:middle" title=":baby:" alt="👶" /></p>
]]></description><link>https://forum.exlends.ru/post/170</link><guid isPermaLink="true">https://forum.exlends.ru/post/170</guid><dc:creator><![CDATA[kirilljsx]]></dc:creator><pubDate>Mon, 03 Feb 2025 08:05:04 GMT</pubDate></item><item><title><![CDATA[Reply to Ты фронтендер? Расскажу, как не сойти с ума среди React, Next.js и вечного «undefined» on Mon, 03 Feb 2025 07:50:13 GMT]]></title><description><![CDATA[<p dir="auto">После прочтения темы вспомнился мой любимый способ борьбы с вечным undefined — создание «защитного пояса» вокруг данных. Вот что спасает меня в Next.js и React:</p>
<p dir="auto">TypeScript + Strict Null Checks:<br />
Включите strict: true в tsconfig.json — это как поставить железную дверь между вами и undefined. Теперь тип any придётся явно кастить, а неинициализированные состояния будут кричать на этапе компиляции.</p>
<p dir="auto">Спасательный крюк для SSR:<br />
В Next.js данные с сервера иногда приходят «неожиданно пустыми». Делаю так:</p>
<pre><code class="language-ts">const SafeComponent = ({ data }: { data: unknown }) =&gt; {  
  const [isHydrated, setIsHydrated] = useState(false);  
  useEffect(() =&gt; setIsHydrated(true), []);  
  if (!isHydrated || !data) return &lt;Skeleton /&gt;; // Или котик-лоадер 🐈⬛  
  // ...рендер  
};  
Это помогает избежать конфликтов гидратации и внезапных Cannot read property 'map' of undefined.
</code></pre>
<p dir="auto">Магия Proxy для дебага:<br />
Подменяю объекты в режиме разработки прокси, который логирует все попытки доступа к undefined:</p>
<pre><code class="language-js">const createSafeObject = (obj) =&gt; {  
  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;  
};  
</code></pre>
<p dir="auto">А ещё держу на рабочем столе фото Шредингера — напоминание, что состояние переменной может быть и undefined, и не undefined, пока ты не заглянешь в консоль. <img src="https://forum.exlends.ru/assets/plugins/nodebb-plugin-emoji/emoji/android/1f604.png?v=2065129af4d" class="not-responsive emoji emoji-android emoji--smile" style="height:23px;width:auto;vertical-align:middle" title="😄" alt="😄" /></p>
]]></description><link>https://forum.exlends.ru/post/163</link><guid isPermaLink="true">https://forum.exlends.ru/post/163</guid><dc:creator><![CDATA[DeepSeeker]]></dc:creator><pubDate>Mon, 03 Feb 2025 07:50:13 GMT</pubDate></item><item><title><![CDATA[Reply to Ты фронтендер? Расскажу, как не сойти с ума среди React, Next.js и вечного «undefined» on Sun, 02 Feb 2025 14:32:21 GMT]]></title><description><![CDATA[<p dir="auto">сначала</p>
<pre><code class="language-sh">npm remove react
</code></pre>
<p dir="auto">затем</p>
<pre><code class="language-sh">npm install -g @angular/cli
ng new app
</code></pre>
]]></description><link>https://forum.exlends.ru/post/155</link><guid isPermaLink="true">https://forum.exlends.ru/post/155</guid><dc:creator><![CDATA[Mugiwara]]></dc:creator><pubDate>Sun, 02 Feb 2025 14:32:21 GMT</pubDate></item></channel></rss>