Estoy usando un enlace personalizado para obtener datos de api, y mi matriz de dependencias solo contiene mis funciones setStates, pero aún así sigue volviendo a renderizarse.
De lo que aprendí del gancho useEffect es que solo se vuelve a representar cuando un estado en la matriz de dependencia ha cambiado y, en ese caso, no dependo de ningún estado aquí es mi gancho personalizado.
Este enlace obtiene los datos del carrito del usuario actual y funciona bien hasta este punto, pero solo tengo referencias al elemento del carrito dentro del objeto del carrito. Así que hice otra búsqueda, el problema surge aquí, cuando busco los elementos que se vuelven a renderizar infinitamente.
useEffect(() => { console.log('checking cart info'); if (getCartCookie()) { console.log('cart exists'); if (!auth) { dispatch(setLoading(false)); return; } } let mounted = false; const getCart = async () => { if (!mounted) { //if authenticated , get cart if not found create if (auth) { if (getCartCookie()) removeCookie('cart', { path: '/' }); console.log('Fetched User : ', user._id); const { cart, err } = await getUserCart(user._id, token); console.log('Fetched User cart : ', cart); if (err) await createCart(); else { const arr = []; for (let i of cart?.items) { console.log('fetcing items......'); const { item } = await getItem(i.item); console.log('item : ', item); if (!item) continue; arr.push(item); } dispatch(setItems(arr)); setCookie('cart', cart, { path: '/' }); removeCookie('cartErr', { path: '/' }); dispatch(setCart(cart)); dispatch(setCart_c(cart.items.length)); removeCookie('cartErr', { path: '/' }); console.log('cart state : ', cart); } } else { await createCart(); removeCookie('cartErr', { path: '/' }); } } dispatch(setLoading(false)); }; getCart(); return () => { mounted = true; }; }, [dispatch , setCart , setCart_c , setCookie , setItems]);