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

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

На проді ситуація геть інша. Ваш клієнт може бути в іншій країні, а сервер буде завантажений, або просто недоступний з різних причин. В результаті - користувач тицяє кнопку, а нічого не відбувається. За кулісами запит то пішов, але користувач про це не знає. І тицяє ще раз. А потім іще... Це погано, і на щастя зараз майже всі відображають індикацію завантаження.

Але є але - часто забувають про обробку помилок. В результаті - користувач бачить вічний лоадер та заблокований UI. А перезавантажити сторінку - втратити форму яку користувач заповнював декільки хвилин. Або, якщо все зовсім погано, корзину яку він набирав... Щастя це не додає.

Другий момент - загальний loader який блокує геть весь екран, хоча заблокувати потрібно, наприклад, лише кнопку submit, або якийсь конкретний віджет. Звісно, нам так простіше - але, заблоковано має бути лише мінімально необхідна частина UI. Це дозволить продовжити роботу зі сторінкою поки користувач чекає на результат.

Тому, коли ви проектуєте щось з мережевими запитами - починайте з помилок. Замість fetch зробіть throw і подивіться як реагує ваш UI. І чи ок вам така реакція. Сповільніть інтернет через Google Developer Tools і вам одразу стане зрозуміло що не так.

Що ви тут взагалі?

Що нового в React? Що в NextJS? Як ринок - чи є робота?

Бачив що з'явилися нові ШІ для розробки (типу Cursor) але сам ще спробувати не міг, обмеження і все таке. Як воно вам?

Окрім обробки завантаження та обробки помилок, не забувайте також відписуватися від асинхронних подій - таймаутів, таймерів, requestAnimationFrame та запитів на сервер.

Зробити все це дуже просто - головне не забути про це :)

Для відміни мережевого запиту потрібно:

1. В useEffect створити екземпляр класу AbortController
2. Передати властивість signal в поле signal методу fetch (Axios це також підтримує)
3. Повернути з useEffect метод, який викличе abort на екземплярі AbortController

Все... Тепер, коли зміняться залежності ефекту, або коли компонент буде демонтовано, асинхронний запит буде відмінено.

З setTimeout, setInterval, requestAnimationFrame ще простіше. Вони повертають спеціальний id і все що вам треба зробити - викликати clearInterval, clearTimeout, cancelAnimationFrame у функції, яку повертає useEffect.

П.М. Планую зробити ефір в якому потоптатися по типових помилках в React. + Можливо зробити розіграш під благодійний збір на майстерню. Але поки це лише в планах.

Бережіть себе.

Отака от несподівана новина

@FwDays запросили мене виступати в жовтні на React+ конфі

Було неочікувано та дуже приємно, вже навіть встигли обговорити з програмним комітетом можливу тему. Якщо вдасться все зробити - може бути прямо цікаво)

Але я про що - оскільки тема ще в роботі, ви можете запропонувати свою - про яку вам було б цікаво послухати. Хто зна, можливо саме її ви і почуєте зі сцени FwDays :)