Naprawianie stale closures w React Hooks
Tworzysz timer w hooku useEffect w React. Chcesz automatycznie zapisywać dokument co pięć sekund. Timer działa, ale zapisuje pusty dokument. Użytkownik napisał dziesięć akapitów, ale timer nic nie widzi.
To jest stale closure.
Hook useEffect przechwytuje zmienne z pierwszego renderowania. Jeśli pominiesz stan w tablicy zależności (dependency array), timer pozostanie „zakleszczony” w przeszłości. Będzie używał starej wersji Twoich danych.
Jeśli dodasz stan do tablicy zależności, timer będzie resetowany za każdym razem, gdy użytkownik wpisze znak. To psuje wydajność i niszczy logikę czasu działania.
Rozwiązujesz to za pomocą wzorca Mutable Ref Pattern.
Użyj hooka useRef, aby przechowywać swój najnowszy stan. Pozwala to timerowi uzyskać dostęp do świeżych danych bez wywoływania nowych renderowań lub resetowania interwału.
Postępuj zgodnie z tymi krokami:
- Utwórz ref, aby przechowywać stan.
- Użyj
useEffect, aby zsynchronizować ref ze stanem. - Skonfiguruj interwał z pustą tablicą zależności, aby uruchomił się tylko raz.
- Uzyskaj dostęp do ref wewnątrz callbacku interwału.
To podejście oddziela timer od danych. Twoje zadania działające w tle pozostają stabilne. Twoje dane pozostają dokładne.
Przestań tracić dane użytkowników przez ciche błędy. Używaj refów, aby synchronizować zadania asynchroniczne z interfejsem użytkownika.
Źródło: https://dev.to/iprajapatiparesh/escaping-the-trap-fixing-stale-closures-in-react-hooks-4gg7