Весь день я відповідаю на одне єдине питання - чи потрібен цей **** useEffect?

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

То ж, аби не страждати як я:

1. Використовуйте ефекти виключно тоді коли без цього ніяк, наприклад для мережевих запитів. (І то це варто виносити в окремі хуки).

2. Робіть ефекти маленькими - одна задача, один ефект. Чим простіший ефект, тим легше буде потім з ним працювати.

3. Не робіть багато ефектів в одному компонентів. Якщо їх більше двох, скоріше за все ваш компонент забагато вміє і прийшов час делегувати роботу комусь іншому.

4. І не допускайте залежностей ефектів один від одного, потім розпутати цей клубок буде дуже складно.

І бережіть себе, самі бачите що відбувається. А нам би ще бажано дожити до перемоги.

@reactbeginners

Там у Juniverse сьогодні буде ефір о 19:00 про штучний інтелект

Піднімають цікаві питання:

- Чи замінить ШІ програміста;
- які реальні практичні задачі можна робити вже зараз із допомогою ШІ, та як їх робити;
- що саме треба розробнику-початківцю, щоб використовувати ШІ;
- чи правда, що зараз потрібно вже вміти мінімально користуватись ШІ, щоб отримати роботу;
- етичні питання стосовно ШІ.

То ж запрошую, має бути цікаво

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

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

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

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

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

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

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

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

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

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

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

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

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

Оригінал

@reactbeginners

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

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

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

Всім дякую)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Не популярні, але корисні хуки в 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

Не популярні корисні хуки в 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 (3/3)

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

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

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

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

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

Не популярні корисні хуки в 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 взагалі. Тестувати стає набагато простіше, логіка лежить окремо від UI. Якщо захочете, зможете навіть UI поміняти без шкоди для логіки. Це дуже крута штука, яка, до того ж, не потребує жодних сторонніх бібліотек і є просто з коробки! Якби ж вона була від самого початку, було б набагато простіше. 😢

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

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

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

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

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

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

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

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

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

Не проґавте)

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

Хуки канарки

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

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

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

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

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

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

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

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

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