Aquí debajo de mi código, me gustaría recuperar todos los datos antes de iniciar el renderizado de mi componente, ¿hay alguna forma de hacerlo en reaccionar? Supongo que tal vez sea una línea de código simple, pero como soy nuevo en la codificación, todavía no conozco el comportamiento de todos los componentes de reacción. Gracias por tu respuesta.

 import { useState, useEffect } from "react"; import axios from "axios"; import Cookies from "js-cookie"; // import material ui import CircularProgress from "@mui/material/CircularProgress"; import Box from "@mui/material/Box"; // import config file import { SERVER_URL } from "../../configEnv"; const Products = ({ catList }) => { // catList is data coming from app.js file in format Array[objects...] console.log("catList ==>", catList); const [isLoading, setIsLoading] = useState(true); const [dataSku, setDataSku] = useState([]); console.log("datasku ==>", dataSku); const tab = []; useEffect(() => { // Based on the catList tab I fetch additionnal data linked with each object of catList array catList.slice(0, 2).forEach(async (element) => { const { data } = await axios.post(`${SERVER_URL}/products`, { product_skus: element.product_skus, }); // The result I receive from the call is an array of objects that I push inside the Tab variable tab.push({ name: element.name, content: data }); setDataSku(tab); console.log("tab ==>", tab); setIsLoading(false); }); }, [catList]); return isLoading ? ( <Box sx={{ display: "flex" }}> {console.log("there")} <CircularProgress /> </Box> ) : ( <div className="products-container"> <div>LEFT BAR</div> <div> {dataSku.map((elem) => { return ( <div> <h2>{elem.name}</h2> </div> ); })} </div> </div> ); }; export default Products; ```