A continuación se muestra un fragmento de código para obtener datos de url por axios ,
import React, { useState, setEffect, useEffect } from 'react'; import axios from "axios"; import LoadingPage from "./LoadingPage"; import Posts from "./Posts"; const url = "https://api-post*****"; function App() { const [posts, setPosts] = useState([]); const fetchPost = async() => { try { const response = await axios(url); return response.data; } catch (error) { console.error(error); } }; let data = fetchPost(); setPosts(data); return ( <main> <div className="title"> <h2> Users Posts </h2> {posts.length ? <Posts posts={posts} /> : <Loading posts={posts} /> } </div> </main> ); } export default App;Sin embargo, obtuvo el error de
uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite Pregunta 1 : ¿Cómo puede ser que haya too many re-render , no hay un bucle o algo así?
Para resolver este error, podemos usar los siguientes cambios:
const [posts, setPosts] = useState([]); const fetchPost = async () => { try { const response = await axios(url); setPosts(response.data); } catch (err) { console.error(err); } }; useEffect(()=> { fetchPost(); }, [posts]) Pregunta 2 : ¿cómo funciona useEffect para evitar demasiadas llamadas?
Pregunta 3 : Siempre trato los ganchos de reacción bajo el capó como comunicaciones web socket , etc. ¿Si ese es el caso?
Solo responderé al número uno.
Advertencia: la respuesta es un poco larga.
Realmente espero que te ayude a entender un tema que me tomó mucho tiempo entender.
Responde uno:
Para responder a esta pregunta debemos preguntarnos dos cosas, a) ¿qué es un efecto secundario? yb) ¿cómo funciona el ciclo de vida de los componentes?
Entonces, sabemos que el componente funcional de React son funciones puras y deberían permanecer así, puede pasar accesorios como parámetros y la función hará cosas y devolverá JSX, hasta ahora todo bien.
y para la segunda parte no podemos controlar el DOM virtual de React, por lo que el componente se renderizará muchas veces durante su ciclo de vida, así que imagina que el DOM virtual decidió verificar el código y comparar entre el DOM virtual y el DOM real y para hacer eso tendrá que verificar y "ejecutar" el código que reside dentro de ese componente específico.
el DOM virtual ejecutará la llamada a la API, encontrará un resultado diferente que provocará una nueva representación de ese componente específico y este proceso continuará como un bucle infinito.
cuando usa usEffect, puede controlar cuándo se llevará a cabo esta llamada a la API y useEffect bajo el capó se asegura de que esta llamada a la API ejecute solo uno de sus cambios específicos y no el cambio DOM virtual VS DOM real.
para resumir, useEffect básicamente lo ayuda a controlar el ciclo de vida del componente
Cuando llame a setPosts , el componente se volverá a procesar y recuperará los datos nuevamente, momento en el que establece el estado con los datos forzando un nuevo procesamiento que recupera los datos ... etc.
Al usar useEffect , puede obtener los datos y establecer el estado una vez cuando el componente se representa por primera vez con una matriz de dependencia vacía.
useEffect(() => { // Fetch the data setposts(data); }, []); Probablemente no quiera ver posts en este useEffect (puede tener muchas) como lo está haciendo en su ejemplo actualizado porque puede encontrarse con el mismo problema.
Por favor, primero verifique su estado de esta manera.
useEffect(()=> { fetchPost(); }, [posts]);