Free React For Beginners

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

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

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

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

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

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

Всім дякую!

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

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

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

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

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

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

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

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

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

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

@reactbeginners

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

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

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

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

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

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

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

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

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

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

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

https://youtu.be/LBz1aQtYot8

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

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

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

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

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

Підсумки по збору на грілки

Зібрано:
Банка: 9000 грн
ПБ: 300 грн
Попередній залишок: 16грн
Сума: 9316

Придбано:
Грілки для ніг HeatPaxx, 8 годин, 160 шт. по 30 грн
Грілки для рук ThermoPaxx, 10 годин, 116 штук по 30 гривень.
Доставка 265 гривень, адресна.

Сума: 8545 гривень.

Залишок: 9316 - 8545 = 771 (тепер є банка де ви можете бачите всі залишки)

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

Розглядався варіант з Декатлоном, але ті що ми взяли були перевірені, а Декатлон ні.

Якщо не буде заперечень, залишок відправлю на збір на машину одному підрозділу, про них буде трохи пізніше.

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

На наступний збір знайду вам щось гарне на розіграш. Може книжку? Чи мерч?

Бережіть себе і допомагайте ЗСУ та один одному.

Щось я злий і не виспаний... Ще й з тасками налажали. 😤

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

Бережіть себе і висипайтеся за можливості.

Інструкція, як встановити канаркову версію React

npm init vite react-canary
cd react-canary
npm i
npm i react@18.3.0-canary-247738465-20240130 react-dom@18.3.0-canary-247738465-20240130

Якщо використовуєте TypeScript, потрібно оновити секцію compilerOptions в tsConfig.json та додати типи: "types": [ "react/canary", "react-dom/canary" ]

Канарковий реліз відкриває доступ до:

1. import { use } from 'react'
2. import { useOptimistic } from 'react'
3. import { useFormStatus } from 'react-dom'
4. import { useFormState } from 'react-dom'
5. 'use client'
6. 'use server'
7. form🤯
8. cache

І так, це не контент для початківців. Але маємо рости і будемо рости.

@reactbeginners

Але назва хуку, те що він тепер вміє працювати одразу і з контекстом і з асинхронними даними - це лажа з лаж.

Чого?

Бо це теж порушення separation of concerns 😁

2) А ось такий самий приклад з використання хуку use

function UserDetails() {
  const user = use(fetchUser());
  return <>{user.name}</>;
}

<ErrorBoundaries error={<>Something went wrong</>}>
  <Suspense fallback={<>loading</>}>
    <UserDetails />
  </Suspense>
</ErrorBoundaries>;

Просто порівняйте два компоненти:

1. Читати компонент UserDetails стало набагато простіше.
2. Він зайнятий виключно тим чим потрібно - відмальовує нашого користувача
3. Коли нам знадобиться змінити лоадер - ми будемо змінювати лише компонент лоадер. Коли нам буде потрібно оновити компонент з помилкою, ми також оновимо лише його. Це гарантує що ми не зламаємо наш компонент UserDetails і рев'ювати такі зміні набагато приємніше.
4. Перевикористовувати код стало простіше, а кастомний хук більше не потрібен.

Єдиний тут "недолік", що ErrorBoundaries вам таки доведеться один раз зробити самому.

А тепер скажіть мені - який код вам легше читати та підтримувати?

@reactbeginners

1) Ось приклад найпростішого! компоненту, якому потрібно отримати асинхронні дані

function UserDetails() {
  const [user, setUser] = useState({
    loading: false,
    data: null,
    error: null,
  });

  useEffect(() => {
    setUser({ ...user, loading: true });
    fetchUser()
      .then((user) =>
        setUser({ data: user, error: null, loading: false })
      )
      .catch((error) =>
        setUser({ data: null, loading: false, error })
      );
  }, []);

  if (user.loading) {
    return <>loading</>;
  }

  if (user.error) {
    return <>Something went wrong</>;
  }

  return <>{user.data.name}</>;
}

Як бачите, навіть незважаючи на те, що функціональність у нього мінімальна, він містить забагато всього:

1. Отримує дані
2. Керує індикацією завантаження
3. Відображає індикацію завантаження
4. Керує роботою з помилками
5. Відображає помилку
6. Відображає користувача.

Наш UserDetails забагато знає. Це призводить до того, що, у випадку будь-якої зміни цих пунктів, вам доведеться чіпати компонент UserDetails, що робить його крихким. Окрім цього це просто більше коду який складніше читати, а використання ефекту лише погіршує ситуацію, оскільки тепер ми не можемо читати код згори вниз, нам потрібно пам'ятати, що спочатку код виконається без ефекту, потім спрацює ефект і код виконається повторно з оновленим станом.

Окрім цього, коли вам знадобиться отримати інші асинхронні дані, ви будете змушені повторити цей самий код, разом зі стейтом, ефектом та двома if-ами. Це дублювання коду, робити це ніхто не хоче.

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

Тепер давайте подивимось на приклад ідеального use (хоча б useAsync його назвали, не знаю)

@reactbeginners

Ок, тоді давайте розбиратися на прикладах, буде трохи тексту, але ви самі хотіли.

А хто не розуміє навіщо цей хук потрібен? (за умови що він ідеально працює) поставте ❤️