0
313
Vistas¿Cómo puedo evitar un bucle infinito en mi useEffect?
Estoy trabajando en un componente funcional llamado TaskComponent, donde tengo este useEffect:
useEffect(() => { const getFilterTasks = () => { onSnapshot(q, (QuerySnapshot) => { QuerySnapshot.forEach((doc) => { filteredTasks.push(doc.data()) console.log(filteredTasks); }) setTasks(filteredTasks); }) } getFilterTasks(); }, [])En mi componente, tengo una lista plana donde el estado de las tareas son mis datos para la lista plana, por lo que quiero representar mi componente cada vez que cambian las tareas y cambia cada vez que navego de mi TaskComponent a CategoryComponent y de nuevo a TaskComponent, porque las tareas filtradas son diferente según la categoría que seleccione. El concepto se ilustra en las siguientes tres imágenes:
Y, obviamente, agregar "tareas" a mi matriz de dependencias no funciona debido al ciclo infinito que creará porque también estoy llamando a setTasks en useEffect.
Entonces, no estoy seguro de poder resolver esto, ¿hay alguna manera complicada de resolver esto, tengo que volver a renderizar mi componente o algo completamente diferente?
2 Respuestas
Responde la pregunta0
En primer lugar, debe saber que useEffect combina componentDidMount, ComponentDidUpdate y componentWillUnmount.
Entonces, si necesita que funcione solo una vez cuando su componente se procesa ( commponentDidMount Approach ):
Recomendado si está obteniendo datos de la API
Su matriz de dependencias debe estar vacía
useEffect( () => { set Your Logic here }, [])Si necesita seguir observando los cambios de algunas variables/estados ( enfoque ComponentDidUpdate ):
- Recomendado si desea actualizar algunas partes de su componente en función de una variable que podría cambiar en el tiempo de ejecución
- Pase las variables que desea ver en la matriz de dependencias
useEffect(()=>{ set Your Logic here },[yourDependencies])Finalmente, si desea ejecutar una función de limpieza cuando está dejando un componente para evitar pérdidas de memoria y comportamientos no deseados en su aplicación ( enfoque de componenteWillUnmount ):
useEffect(()=>{ set Your Logic here return () => { cleanup } },[])0
EDITAR: La pregunta está resuelta ahora, acabo de agregar el item.id en la matriz de dependencia.
Así es como lo he hecho con el estado de actualización/setRefresh:
useEffect(() => { const getFilterTasks = async() => { const q = query(collection(db, 'allTasks'), where('userID', '==', userID), where('categoryID', '==', item.id)) const querySnapshot = await getDocs(q); querySnapshot.forEach((doc) => { filteredTasks.push(doc.data()) }) setTasks(filteredTasks) } getFilterTasks(); setRefresh(false) console.log(refresh) }, [refresh]) const handleRefresh = () => { setRefresh(true); }He agregado: const [refresh, setRefresh] = useState(false);
Y luego tengo un botón que está conectado a handleRefresh.
Esto funciona, pero no es una manera hermosa de hacerlo.