Уникання пастки: Виправлення застарілих замикань у React Hooks
Застарілі замикання (stale closures) призводять до непомітної втрати даних у React.
Ви створюєте панель керування з фоновим таймером. Ви використовуєте setInterval всередині хука useEffect, щоб автоматично зберігати дані кожні 5 секунд.
Помилка виникає під час спрацювання інтервалу. Він зберігає порожній документ, навіть якщо користувач заповнив цілу сторінку. Інтервал залишається «застряглим» у минулому. Він використовує стару версію вашого стану.
The Problem
Коли виконується useEffect, він захоплює змінні у своїй області видимості.
- Якщо ви не додасте стан до масиву залежностей, інтервал використовуватиме стан із першого рендеру.
- Якщо ви додасте стан до масиву залежностей, React перезапускатиме інтервал при кожному натисканні клавіші. Це вбиває продуктивність і порушує ваш таймінг.
The Solution: The Mutable Ref Pattern
Ви повинні відокремити таймер від даних. Використовуйте хук useRef, щоб зберігати постійне посилання на ваш останній стан. Це дозволяє уникнути ререндерів і зберігає ваш інтервал стабільним.
How to implement it:
- Створіть
ref, щоб зберігати ваш останній стан. - Використовуйте
useEffect, щоб оновлювати цейrefщоразу, коли змінюється ваш стан. - Запустіть інтервал із порожнім масивом залежностей, щоб він спрацював лише один раз.
- Отримуйте доступ до
refвсередині колбеку вашого інтервалу.
Цей метод гарантує, що ваші фонові завдання завжди використовуватимуть актуальні дані. Це забезпечує швидкість інтерфейсу та безпеку ваших даних.
Source: https://dev.to/iprajapatiparesh/escaping-the-trap-fixing-stale-closures-in-react-hooks-4gg7