const [resourceType, setResourceType] = useState("posts"); const [data, setData] = useState(""); useEffect(() => { console.log("use effects called: " + resourceType); fetch(`https://jsonplaceholder.typicode.com/${resourceType}`) .then((result) => { return result.json().then((data) => { return { data: data, response: result.status, }; }); //JSON.parse(result); }) .then((data) => { console.log("here"); setData(JSON.stringify(data)); console.log(data); }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>Tengo el código anterior que está obteniendo datos ficticios de la URL del marcador de posición JSON y luego actualizando la variable de datos (setData(JSON.stringify(data))). Mi pregunta es, esta implementación debería entrar en un bucle infinito según mi comprensión de useEffect y useState react hook. Esto es lo que creo que debería suceder, la página hace que llame a useEffect, actualiza la variable de datos, lo que hará que se vuelva a hacer el componente, que nuevamente debería llamar a useEffect, por lo tanto, se vuelve a hacer el componente y el ciclo continúa. Pero esto no está sucediendo y useEffect se llama solo dos veces. ¿Por qué está pasando esto?
Los datos son los mismos la segunda vez que llamas a setData , entonces:
Probablemente vería un bucle infinito si no estuviera encadenando los datos.
Debe pasar el objeto de data como matriz de dependencia a useEffect()
useEffect(() => { ...your code }, [data]);