Corregir cierres obsoletos en React Hooks
Construyes un temporizador en un hook useEffect de React. Quieres autoguardar un documento cada cinco segundos. El temporizador se ejecuta, pero guarda un documento vacío. El usuario escribió diez párrafos, pero el temporizador no ve nada.
Esto es un cierre obsoleto (stale closure).
El hook useEffect captura las variables del primer renderizado. Si dejas el estado fuera del array de dependencias, el temporizador se queda estancado en el pasado. Utiliza una versión antigua de tus datos.
Si añades el estado al array de dependencias, el temporizador se reinicia cada vez que el usuario escribe un carácter. Esto arruina el rendimiento y rompe tu lógica de temporización.
Resuelves esto con el Patrón de Referencia Mutable (Mutable Ref Pattern).
Usa el hook useRef para mantener tu estado más reciente. Esto permite que tu temporizador acceda a datos actualizados sin activar nuevos renderizados ni reiniciar el intervalo.
Sigue estos pasos:
- Crea una referencia (
ref) para mantener tu estado. - Usa un
useEffectpara sincronizar la referencia con tu estado. - Configura tu intervalo con un array de dependencias vacío para que se ejecute solo una vez.
- Accede a la referencia dentro del callback del intervalo.
Este enfoque desacopla tu temporizador de tus datos. Tus tareas en segundo plano se mantienen estables. Tus datos se mantienen precisos.
Deja de perder datos de usuario por errores silenciosos. Usa referencias (refs) para mantener tus tareas asíncronas sincronizadas con tu interfaz de usuario.
Fuente: https://dev.to/iprajapatiparesh/escaping-the-trap-fixing-stale-closures-in-react-hooks-4gg7