Народний проект, частина друга - четвер, 19:00, YouTube

🍹Поки є умовно вільні вечори - пропоную продовжити "Народний проект" - проект на React який робиться повністю в прямому ефірі.

📅 Кому цікаво - приєднуйтесь завтра о 19:00. В планах використати хук useSyncExternalStore та задеплоїти проект на GitHub pages.

Кому не цікаво - сьогодні буде пост про хук use

@reactbeginners

Про новий хук `use`

Хук дозволяє вам працювати з промісами так, наче це звичайні значення:

const user = use(Promise.resolve({ name: 'Vitalii' }));
return <>{user.name}</>;

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

if (!userId) return <>User not found</>;
const user = use(Promise.resolve({ name: 'Vitalii' }));
return <>{user.name}</>;

Хук use також можна використати для отримання контексту. Різниця між use та useContext полягає в тому, що useContext не можна використовувати умовно. А use можна.

Ось так просто це виглядає. Але є кілька нюансів, які ще й відрізняються в залежності від того чи це чистий React чи Next.

Про React

1. Use не доступний в React 18.2. Для того щоб його використати потрібно встановити react@canary версію, про це буде окремо.
2. Для того аби цей хук працював як очікувано, компонент в якому використаний хук use має бути огорнуто в компонент Suspense, який також показує індикацію завантаження
3. На версії 18.3.0-canary-247738465-20240130, ErrorBoundaries з rejected promise не працюють, хоча мають.

Про Next.JS (дожились, да?)

1. Use доступний в останній версії Next. Встановлювати щось додаткове не потрібно.
2. Хук працює лише в серверних компонентах (чому??), але не потребує використання Suspense
3. Для індикації завантаження можна використовувати файл loading.tsx
4. Для відображення помилки можна використовувати компонент error.tsx

Але в серверних компонентах можна використовувати async/await що виглядає простіше.

В підсумку - на мене виглядає все "дуже цікаво", але або недопрацьовано (react), або недопрацьовано і безтолково (next). Але це моя особиста думка.

@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

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

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

Чого?

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

Інструкція, як встановити канаркову версію 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

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

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

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

Сьогодні, 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 і більше не оброблюється браузером. Але, сам запит вже "пішов" на бекенд і цілком може бути оброблений бекендом. А може бути і не оброблений. Залежить від того що "вміє" серверна частина.

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