#анонс
Доброго вечора, я до вас з мішечком гайпу. Шо там по авторським курсам? Чи можна в принципі чогось навчитися на курсах? Чим обумовлена їхня вартість? Чим відрізняється хороша школа від інфоциган, і чи існують хороші школи в принципі? Від чого залежить якість навчання та результат, а також як справи з гарантованим працевлаштуванням — про це все та багато іншого будемо спілкуватися під час запису подкасту "Є одна тема" з Анастасією Шеремет, продюсеркою освітніх курсів на факультеті Dev&DS в Projector Institute, де спеціалізується на кафедрах Front-end, Quality Assurance та Engineering Management.

Розмова буде максимально відвертою, я вже підготував багато дуже незручних запитань, тож не проґавте нагоду особисто в прямому етері стати свідками нашої розмови. І, як і завжди, під час запису етеру збиратимемо кошти на користь ЗСУ в обмін на крутезні подарунки!

А ще нагадаю, чому особливо круто прийти саме на живий етер, а не дивитися потім колись в записі:

1. Це незабутня душна/дружня (потрібне підкресліть) атмосфера в чаті!
2. Усі технічні несправності, бекання й мекання — просто перед вашими очима!
3. Донати й розіграш крутезних подарунків від мене особисто та моєї гості!
Бо потім я то гарнюнько змонтую, а оригінал стриму сховаю в плейлист для спонсорів каналу.

⚡️ ІТ-курси: освіта чи омана?
⏰ 25 січня, 19:00
📺 Сергій Бабіч та Дивовижний світ веброзробки

Не зміг пройти повз, можливо тому що з 7 ранку слухаю як працює ППО)

А як ви, вірите в IT курси і "гарантоване працевлаштування"?

Харків, мої співчуття. Тримайтеся, бережіть себе та близьких.

Весь день я відповідаю на одне єдине питання - чи потрібен цей **** 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-е, я іду...