Сьогодні, 19:00, Народний проект, частина 2.

Будемо продовжувати. Розраховуємо до двох годин, десь так.
В програмі деплоймент і useExternal хук

Лінка вже на сам ефір

Беріть чай/каву/кота/собаку/тарантула та заходьте

Update: відео переведено в стан доступу тільки по посиланню, як і минуле.

А що я вам приніс?

🤝 Дякую пані Єлізаветі за справжній приклад зі співбесіди

https://youtu.be/LBz1aQtYot8

Анонси на сьогодні

19:00, Сергій Бабіч, Перша співбесіда нового сезону на Junior React JS. (деталі)
20:00, React їде в гості до CS-GO, просто граємо в прямому ефірі (твіч).

UPD. Щодо твіча - пропозиції в що пограти приймаються, другим на черзі буде HOMM3, а от далі залежить від вас. Може щось буде, може нічого)

П.М. В понеділок ввечері буде маленький сюрприз)

Зірки твіча з мене не буде хоча було весело. Тож продовжимо лупати скалу фронт-енду)

І продовжуючи тему фронтенду, хто не знає що буде виведене в консоль - бігом дивитися відео, там 2 хвилини.

console.log(0);
setTimeout(() => console.log(1));
new Promise((resolve) => {
  console.log(2);
  resolve(3);
}).then(console.log)

Якщо сподобалося - поставте лайк та пошерте. Я буду вдячним і відео буде більше. Якщо не сподобалося - напишіть що саме.

Відповіді ховайте під спойлер будь-ласочка)

❓Як скасувати мережевий запит в React

Тут в LinkedIn пролетіло питання - як відмінити мережевий запит в React. На щастя все стало досить просто після появи спеціального класу AbortController.

Виглядає це щастя ось так:

useEffect(() => {
  // Створюємо екземпляр AbortController
  const abortController = new AbortController();

  // Робимо запит та передаємо у fetch `signal'
  // Цей сигнал "просигналить" фетчу, 
  // якщо виникне необхідність відміни запиту
  fetch('/user', {signal: abortController.signal});

  // Повертаємо функцію відписки з  ефекту
  // Ця функція буде викликана коли компонент буде видалений
  // Або зміняться його залежності
  // І викличе сигнал, який повідомить фетчу про відміну
  return () => abortController.abort();
}, []);

Як бачите - не складно. Якщо ви працюєте з axios - все те саме, також через AbortController
Cподіваюся було корисно.

@reactbeginners

Мене тут піймали на неточному формулюванні, то ж виправляюся.

Використання відписки не зовсім "скасовує запит". Так, запит переходить в стан canceled і більше не оброблюється браузером. Але, сам запит вже "пішов" на бекенд і цілком може бути оброблений бекендом. А може бути і не оброблений. Залежить від того що "вміє" серверна частина.

А питання - навіщо взагалі відміняти запит не менш цікаве)

Обіцяв я вам сюрприз сьогодні - ось маєте

Відео № 1 - Вступ до курсу Next.JS
Відео № 2 - Що таке Next.JS

Буду потрохи викладати, тому що статися може що завгодно, хай краще залишиться незакінченим ніж лежатиме у приватних.

Всім дякую!

Якщо вам сумно постійно писати обробку помилок ви завжди можете написати універсальний компонент:

Для цього потрібно створити класовий компонент (функціональні такого не вміють) в якому реалізувати три методи:

getDerivedStateFromError - оновлює ваш стейт у випадку перехоплення помилки
componentDidCatch - перехоплює помилку і може щось із нею зробити (залогувати, наприклад)
render - відображає контент в залежності від того чи була помилка, чи ні.

В коді це виглядає так:

class SimpleErrorBoundaries extends PureComponent<
  SimpleErrorBoundariesProps,
  SimpleErrorBoundariesState
> {
  static getDerivedStateFromError(error: Error) {
    return { hasError: true, error };
  }

  state = { hasError: false };

  render() {
    const { children, errorFallback } = this.props;
    return this.state.hasError ? errorFallback : children;
  }

  componentDidCatch(error: Error): void {
    this.props.onError && this.props.onError(error);
  }
}

Типи виглядають досить просто

type SimpleErrorBoundariesProps = {
  children: ReactNode;
  errorFallback: ReactNode;
  onError?: (error: Error) => void;
};

type SimpleErrorBoundariesState =
  | { hasError: false }
  | { hasError: true; error: Error };

Тепер ви можете писати код накшталт такого:

<SimpleErrorBoundaries errorFallback={<>Sorry mate</>}>
  <ErrorComponent />
</SimpleErrorBoundaries>

❗️Варто пам'ятати:

1) Виключення, які стаються в середині промісів просто так не перехоплюються, для цього потрібно використовувати async/await
2) Виключення, що стаються в середині самого компоненту ErrorBoundaries також не перехоплюються.

Для обробки помилок в Next.JS цей підхід також працює. Але, як ще один варіант, ви можете використати файл error.tsx дефолтний експорт якого буде відображений у випадку, якщо в роуті станеться помилка.

А ось пакет від одного з розробників #React, який вирішує те саме завдання. Майже 4 мільйона скачувань, а він і досі не в основній бібліотеці 😢

@reactbeginners

Ранок видався відверто паршивим. Сподіваюся усі цілі (

В скарбничку багів та дитячих хвороб Next.JS на page* роутері

Маємо дуже простий React код:

const { query } = useRouter();
return <>
  {query.id ? 'HELLO': 'ERROR'}
</>

Звичайними словами - якщо в URL є id з якимось значенням - виведи HELLO, якщо немає - виведи ERROR

Тепер питання, що буде виведено на екран протягом наступної секунди, якщо ваш користувач зайде на URL:
/?id=test

Спочатку дайте відповідь собі і напишіть у коментарях, а потім заглядайте:

Спочатку виведеться ERROR
Потім екран оновиться і виведеться HELLO

Це відбувається тому, що в Next.JS router має ще один прапорець - isReady, який потрібно перевіряти перед тим як звертатися до роутера. Поки він не ready - там може не бути тих значень на які ви очікуєте. І це відбувається незважаючи на те, що URL та всі дані в ньому вже існують під час обробки запиту на сервері.

* На щастя, в новому app роутері цю проблему вже вирішили. Для цього знадобилося усього 13 мажорних релізів :)

Вибачайте що контент став трохи сухуватим, просто зараз емоційно все це вивозити досить складно.

Я звісно розумію що сиджу не в окопах, є де жити, є що їсти та й ви мене підтримуєте добряче, але 2 роки війни це довбані два роки.

Вірю що все буде добре, треба просто дотягнути.

Наступні два тижні будуть виходити міні відео про некст, сподіваюся встигну записати хоча б клієнтський роутер. Але не обіцяю(

Я не Сергій, цьомік у лобіка то не моє, але обійняти б обійняв.

Бережіть себе!

Хвилинка слабкості минула, пихтимо далі.

Сьогодні о 19:00 виходить третє відео про Next.JS - Мій перший застосунок

В сумі:

Відео № 1 - Вступ до курсу Next.JS
Відео № 2 - Що таке Next.JS
Відео № 3 - Мій перший застосунок

Четверте відео буде в понеділок.

До речі, як вам формат з таких "мікро" відео?

@reactbeginners

Знаєте звідки цей код?

Це "ідеальний" код до якого має прагнути кожен хто бажав працювати в яндексі на болотах

А прикол цього коду не в тому, що він виглядає як поріддя мініфікатора, а в тому, що він містить помилку, яку ніхто не помічав, тому що код написаний не руками, а одним місцем нижче спини.

Як ви самі бачите, такий код складно читати, ще складніше розуміти і важко підтримувати. Якщо говорити простими словами - це максимально гівняний код з тих що я бачив.

Але як приклад - це дійсно ідеальний код як робити не треба (за умови, звісно, що ваша посада не мініфікатор-обфускатор)

Тому що, друге правило гарного коду полягає в тому, що ви маєте писати максимально простий код. Такий простий як двері, щоб його міг прочитати і мід і джун і навіть ПМ.

І повірте мені - написати простий код набагато складніше ніж те гівно що на цьому прикладі.

То ж завжди обирайте простоту. Це має бути вашим прагненням. Якщо ви бачите складний код - скоріше за все щось пішло не так.

@reactbeginners

Знову удар по Харкову 😢. Нажаль, можу висловити лише свої співчуття та підримку. Чи стане від цього комусь легше - я не знаю. Але ви не самі, це точно.