Free React For Beginners

Про новий хук `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

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

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

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

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

@reactbeginners

Хуки канарки

Як ви знаєте, поточна версія React - 18.2 і вона не оновлювалася десь два роки. Але окрім цієї стабільно-застійної версії, React постійно випускає канаркові релізи. Вони вважаються "умовно" стабільними. Власне, Next.JS використовує саме ці релізи, про що я перекладав статтю раніше (тиць)

І ось там, у канарковому релізі, є декілька нових хуків один з яких може бути цікавим:

В самому React-і додалися два нових хуки:

1. Хук use, який інтегрований з компонентом Suspense і який дозволяє працювати напряму з Promise та з контекстом

2. Хук useOptimistic, який нам має допомогти з показом "оптимістичного"\* результату асинхронних операцій

А ще два хуки були додані в React-dom: useFormStatus та useFormState, але з ними без чашки кави так просто не розібратися.

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

* Оптимістичний апдейт - це коли ми повідомляємо користувачеві про успішність операції, не маючи на це підтвердження.

Всім тихого вечора

Ну що, готові? За 15 хвилин починаємо наш 1 етер з серії "Резюме гриль" 😎

Кандидат, чиє резюме набере найбільше балів сьогодні, піде на технічну співбесіду наживо до пана Serhii Babich. 

Не проґавте)

#стрім #подкаст

Будуть розбирати резюме, не моє 😁. Жарти жартами, а резюме треба((

👉 Ось туточки в лінкедині всі хуки в одному місці у формі презентації (нажаль зібрати їх докупи в Telegram не вийде)

Якщо корисно, додавайте до обраного, ставте там все що треба і так далі)

Сподіваюся зміг вам сьогодні принести щось і корисне і цікаве. Ще на цьому тижні буде "народний проект", так що чекайте на анонс.

Чим більше реакцій від вас тим більше контенту)

Пішов працювати. Next-е, я іду...

От ви мені зараз не вірите, а це, концептуально, просто найкрутіший хук з усіх. 💪💪💪

Він дозволяє повністю відокремити ваш стейт від React взагалі. Тестувати стає набагато простіше, логіка лежить окремо від UI. Якщо захочете, зможете навіть UI поміняти без шкоди для логіки. Це дуже крута штука, яка, до того ж, не потребує жодних сторонніх бібліотек і є просто з коробки! Якби ж вона була від самого початку, було б набагато простіше. 😢

❓Про експерементальні хуки писати?

Не популярні корисні хуки в React (3/3)

const userName = useSyncExternalStore(
userStore.subscribe,
() => userStore.userName
);

❤️Можливість мати стор окремо від компоненту без зайвих бібліотек (топ штука, але вже пізно)❤️

function UserEditor() {
  const userName = useSyncExternalStore(
    userStore.subscribe,
    () => userStore.userName
  );
  return (
    <>
      <h1>Hello {userName}</h1>
      <input onChange={(e) => userStore.setUserName(e.target.value)} />
    </>
  );
}

class ExternalStore {
  private _listeners: (() => void)[] = [];
  constructor(private readonly _user: User) {}

  get userName() {
    return this._user.name;
  }

  setUserName = (name: string) => {
    this._user.name = name;
    this._listeners.forEach((l) => l());
  };

  subscribe = (listener: () => void) => {
    this._listeners.push(listener);
    return () => (this._listeners = this._listeners.filter(listener));
  };
}

Деталі: Хук дозволяє підписатися на зміни в об'єктах, які знаходиться поза межами React. Два важливі моменти: 1) Функція subscribe зобов'язана повертати функцію відписки. 2) Функція, яка отримує дані, має повертати нові значення виключно якщо ті були змінені. Повернення НОВОГО об'єкту на кожен виклик призведе до помилки.

Сторонній ефект: На вас будуть дивно дивитися, бо це ж не канонічно.
Документація

@reactbeginners

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

Все, зараз буде, налайкали)

Не популярні корисні хуки в React (3/3)

Не дам, поки перші два не полайкаєте! Для кого я їх писав?

Насправді, оскільки довелося перевіряти деяки речі, то й сам дізнався цікаві моменти. Наприклад я вважав що useId видає унікальний айдішник (а це не так)

Оновлено: ніт, я не жлоб)

Не популярні корисні хуки в React (2/3)

const deferedValue = useDeferredValue(value);

Використовується, коли ви хочете мати можливість відкласти оновлення якогось компоненту на "трошечки потім", наприклад під час роботи з мишкою або мережевими запитами

const [point, setPoint] = useState({ x: 0, y: 0 });
const deferedPoint = useDeferredValue(point);
return (
  <>
    <div
      style={{ height: `50vh` }}
      onMouseMove={(e) => setPoint({ x: e.screenX, y: e.screenY })}
    ></div>
    <SomeComponent point={deferedPoint} />
  </>
);

Деталі: Значення deferedValue змінюється із невеликою затримкою, проміжні значення з'їдаються, а компонент отримує останнє значення. Відповідно ви зможете зеконимити на рендері дочірніх компонентів. Для цього потрібно реалізувати PureComponent або огорнути дочірній компонент в React.memo. Окрім цього, компонент який працює з deferedValue "не підвисає", оскільки React вміє відміняти рендери, викликані оновленням deferedValue

Cторонній ефект: це оптимізація швидкодії яка трохи ускладнює код, використовувати разом із вимірюванням.

@reactbeginners

Не популярні, але корисні хуки в React (1/3)

const inputId = useId();

Використовується в динамічних формах для зв'язки input та label, а також в компоненті врапері для label+input якщо ви не хочете прокидувати id як пропс. Безпечний для SSR.

const inputId = useId();
return <>
  <label htmlFor={inputId}>Hello</label>
  <input id={inputId}/>
</>

Деталі: ключ не випадковий, має вигляд :rX: де X просто глобальний counter в React. Якщо (випадково) у вас 2+ реакт застосунків на сторінці - використовуйте identifierPrefix, який передається при ініціалізації React застосунку

Сторонній ефект: Автоматизатори, які покаладються на id елементів вас не люблять. А все тому що треба користуватися data-test-id, а не лізти куди не просять.

Документація

@reactbeginners

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

Але зараз буду виправлятися, чекайте :)

❗️😍Збір закрито достроково. Зібрали більше 9000 гривень з урахуванням ПБ. 😍❗️

Цього вистачить щоб закрити потреби, а ваші ресурси не нескінченні.

Всім дякую - ви круті 💪❤️

Поки літає довбаний міг, напишу вам маленький камінгаут))

Я й досі люблю старі класові компоненти в React ❤️

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

Хуки звичайно принесли користь, особливо можливість писати власні кастомні хуки щоб шерити функціонал зав'язаний на життєвому циклі, тут не відняти. Але складні компоненти я й досі пишу на класових компонентах. І щасливий)

П.М. Рано чи пізно той міг упаде)
П.П.М. Не забудьте кинути 30 гривень на грілочки, збір закрию завтра зранку.

UPD: ЗБІР ЗАКРИТО ДОСТРОКОВО
🎉 Обіцяна банка на хімічні грілки.

👉Отже, збираємо на хімічні грілки для підрозділу, якими опікуються наші капелани. Вчорашня подяка саме від них.

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

💰Одна пара грілок - 29.90, працюють грілки до 10 годин. 3_000 гривень я вже поклав, так що 100 штук у нас вже є. Долучайтеся!

❗️Забув сказати - банка відкрита на 1 добу, тобто до завтра. Скільки назбираємо стільки і буде

П.М. Одну грілку зараз кладу в куртку, подивимось скільки протримається.

https://send.monobank.ua/jar/98GYsUQxyb (так, нарешті!)
ПБ: 4731185629296887 ( для таких як я)

😍Дивіться що нам надіслали😍

І так, це саме НАМ, бо ви туди вклали не менше, а то й більше за мене 💪

А ще я нарешті відкрив Моно 😎, так що все стане тепер трохи простіше. Завтра як раз протестуємо - то ж у кого є 30 гривень притримайте будь-ласочка. Буде збір на хімічні грілки для тих самих капеланів, бо стояти в чергуванні зараз дуже холодно. А обмороження всякі то повна лажа.

Всім дякую)

Якщо ми вже заговорили про React та не стабільні версії

👉 Ось ChatGPT переклав статтю про те як React випускає не стабільні версії, що таке Canary і чи дійсно Next.JS використовує щось "не те".

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

Оригінал

@reactbeginners

Там на горизонті React.Conf яку проведуть на мій ДР в Неваді.

Я б поїхав, але для цього треба підписувати контракт з ТРО Монако, а я щось не хочу 😃

До-речі, ви знаєте що React постійно оновлюється? Останній реліз був випущений шістнадцять годин тому: 18.3.0-canary-3d9b20132-20240124. А от стабільній версії вже близько двох років.

П.С. Спробуйте вгадати в коментарях, де ви можете зустріти не стабільні версії React)

Мені тут Ігорь (ви його чули на нашому YouTube) підказує:

Якшо в юзефекті є setInterval/setTimeout то треба не забувати завжди(!) в такому ефекті робити

return () => {clearInterval()/clearTimeout()}

Також не забувайте, що setTimeout якшо його не очистить виконається навіть після unmount 😉

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

Ігоре, я завдання виконав, з тебе кава 😎