Tengo el siguiente código en React para obtener datos de Firebase. Soy nuevo en useEffect y está dando demasiados errores de renderizado:
let post1 = []; useEffect(() => { getDocs(collection(db, "posts")).then((snapshot) => { const data = snapshot.docs.map((doc) => ({ id: doc.id, ...doc.data(), })); post1 = data; }) }, [posts]); setPosts(post1);De la forma en que lo escribiste, se llama a setPosts(post1) en cada renderizado. Supongo que las posts y setPosts se desestructuran a partir de un valor useState() , lo que significa que cada vez que llama a setPosts() , se activa una nueva representación. Debe mover la llamada setPosts() a useEffect() . También debe eliminar las posts de la matriz de dependencias de useEffect porque si alguna de esas dependencias cambia, también desencadena una nueva representación. En tu caso específico, prueba esto:
useEffect(() => { getDocs(collection(db, "posts")).then((snapshot) => { const data = snapshot.docs.map((doc) => ({ id: doc.id, ...doc.data(), })); setPosts(data); }) }, []);