Esto se puede resolver usando 2 enfoques.

1. Pase el estado en la matriz de dependencia de useEffect

 const [picth, setPicth] = useState([]); // Initial state useEffect(() => { if (picth && picth.length !== 0) { // Checks if data exists and length //is greater than 0 setLoad(false); // Set Loading to false } }, [picth]); const fetchPicth = async () => { setLoad(true); const response = await fetch(url); const data = await response.json(); setPicth(data.pink); };

2. Compruebe la longitud, muestre el progreso si no hay datos. Mostrar si hay datos presentes.

 {picth.length === 0 && <div>Progress</div>} {picth.length > 0 && ( <div> {picth.map((book, index) => { return ( <YourComponent></YourComponent> ); })}

Elimina fetchPicth de la matriz de dependencias. Si desea establecer la carga en falso, puede hacerlo así:

 const [load, setLoad] = useState(false); if (load) { return <h2>Progress</h2>; } const fetchPicth = async () => { setLoad(true); const response = await fetch(url); const data = await response.json(); setPicth(data.pink); setLoad(false) }; useEffect(() => { fetchPicth(); }, []);

El uso del código anterior solo obtendrá los datos de la API solo una vez, es decir; cuando el componente está montado.