Всі ж пам'ятають, що useEffect:

1️⃣ Виконується вже після рендеру компоненту
2️⃣ У випадку маніпуляції зі стейтом - викликає повторний рендер і самого компоненту, і скоріше за все, його нащадків?

👁Тепер подивіться на приклад коду на зображенні. Маємо каунтер і маємо ефект, який спостерігає за ним. Коли каунтер змінюється, ми оновлюємо умовну data - наче все просто.

❓Чому цей код "не дуже"? Тому що відбувається наступне:

1. Викликається setCounter
2. Відбувається перерендер компонента і його нащадків
3. Викликається effect
4. Оновлюється state що ще раз викликає перерендер компонента і його нащадків

Якщо внизу лежить щось "дороге" - будемо мати проблеми зі швидкодією. Плюс наш код з лінійного і синхронного перетворюється на казна що.

🤔А тепер уявіть собі декілька ефектів які поєднуються в ланцюг?

🥶Я бачив такі ланцюги з трьох-чотирьох ефектів і, повірте, це не те що ви хочете мати у своєму проекті.

P.M. Працюю над відео про тести, думаю будео одразу мучити Next.

@reactbeginners