React та зомбі процеси, або чому потрібно відписуватися від усяких інтервалів та fetch-ів

🤩 Ще одне відео з серії #ReactCodeSmells. На цей раз 7 хвилин про те, чому і як потрібно відписуватись від усіляких setInterval, setTimeout, та fetch і що буде якщо ні.

Ну і коротенька вижимка для текстофілів

✍️ React не вміє автоматично відміняти триваючи в часі завдання. Відповідно, може статися ситуація, коли вони будуть вже не потрібні, але продовжать виконуватися.

✍️ Для відміни таких "процесів", з хуку useEffect поверніть метод, який буде викликаний перед видаленням компоненту.

✍️ Для відміни fetch, використовуйте AbortController або axios (але там теж AbortController вже)

Гарних всім вихідних!
@reactbeginners

#ReactCodeSmells - стор не для локальних даних.

👜Глобальний стор штука зручна і наче навмисно запрошує вас все класти туди. Але це підла та підступна пастка, тому що глобальний стор доступний буквально всім (на те він і глобальний). А це призводить до його крихкості та заплутаності. А ще й до поступового росту перетворюючи миле кошеня з документації на монстра з нічних кошмарів.

Боротися з цим можна і треба:

1️⃣ По-перше, використовуйте глобальний стор лише для тих даних які потрібні буквально по всьому проекту, наприклад дані користувача, або корзина користувача.

2️⃣ По-друге, діліть глобальні стори на логічні шматки. Далеко не завжди вам потрібен єдиний стор для всіх 217 сторінок. Для прикладу зверніть увагу на слайси в Redux-Toolkit. Та й взагалі мати декілька логічно розділених сторів цілком розумна ідея, навіть RTK на моїй стороні.

3️⃣ По-третє, не соромтеся використовувати локальний стейт. Якщо дані потрібні лише в одному компоненті це й так очевидно. Але якщо дані потрібні в батьківському компоненті та на глибину в 1-2 компоненти вниз то використовувати локальний стейт теж не гріх.

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

Бережіть себе, скоро побачимось.

@reactbeginners