Vasyl, мені, як випускнику Mate Academy (part time Front-End), деякі з ваших висловлювань, які є швидше за все гіпотезами, видаються такими, що не відповідають дійсності. Я завершив навчання в університеті за спеціальністю «Англійська Філологія», що є зовсім нетехнічною спеціальністю. У Mate Academy я завершив навчання весною 2023 року за 1-1.5 роки (мав фул тайм роботу паралельно) і ніхто мене нікуди «не запихав», я знайшов роботу із ринковою, конкурентною зарплатнею (аналітику зарплат дивіться на DOU, наприклад) на позицію Junior Front-End Developer. До речі, маючи Advanced (просунутий) рівень англійської мови, дана перевага не бралась до уваги при наймі.

Ви також згадали, що статистики по найму на парт-таймі не ведуть. Цю інформацію можна якось перевірити? Коли я повідомив про свій найм, то я заповнював анкету в Mate Academy з деталями найму, що швидше за все таки і було для внутрішньої аналітики і розуміння розкладу по працевлаштуванню студентів напрямку парт-тайм.

Так, я би використовував модульний підхід або headless React Components, що, звісно, покращить структурованість та зрозумілість коду

Дякую за ваш коментар і круто, що у вас є така жага до знань. Ні, на жаль, поки не розглядаю співавторства.

Дякую за ваш коментар і що долучилися до розгляду хуків! Ви праві, useFormStatus в React 19 нативніше викликати у компонентах усередині елементу form.

Приклад із dev.to/...​rmstatus-in-react-19-3khh

import { useFormStatus } from "react-dom";

const Register = () => {
  const { pending } = useFormStatus();

  return (
    <button className="border border-black">
      {pending ? "Loading" : "Register"}
    </button>
  );
};

export default function Home() {
  const formAction = async (formData: FormData) => {
    "use server";
    await new Promise((resolve) => {
      setTimeout(resolve, 1000);
    }); //intentionally delay time
    console.log(formData.get("firstName"));
  };

  return (
    <form action={formAction}>
      <div>
        <label>Name:</label>
        <input type="text" name="firstName" />
      </div>
      <Register />
    </form>
  );
}

Дякую, що поділилися своїм напрацюванням кастомного хука. Вцілому використання `AbortController` для уникнення «витоків» запитів, які лишаються активними після того як компонент пропадає з сторінки — це, на мій погляд, гарна практика.

Для покращення оптимізації я би ще додатково огорнув би fetchFunction у хук useCallback.

 
const fetchFunction = useCallback(async (signal) => {
  const response = await fetch('https://api.example.com/data', { signal });
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
}, []);

Олексію, дякую за те, що помітили це!

Vladyslav, дуже дякую вам за ваш коментар і слушне зауваження. В наступних своїх статтях буду використовувати вашу пораду та залишати посилання. Частина коду із useServerComponent — це кастомний хук, який я взяв зі свого проекту, перепрошую, якщо він міг збити вас з пантелику. Ще раз дякую вам!

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

У React diamond dependencies можна вирішити за допомогою обʼєднання стейтів у один контекст або useReducer. Але у вирішенні таких комплексних задачах я би віддав перевагу Redux.

Так, use context у поєднанні з useReducer можна використати для керування станами в React-застосунках.

Я поки не знімаю навчальні відео, але бачу, що Yuriy Petrichenko веде свій ютуб канал. Можете йому написати в особисті і обговорити з ним цю ідею.

Дякую, Yuriy!

Дуже дякую!