No estoy seguro de cuál es la mejor manera de formular esta pregunta, aparte de pedir una forma clara de hacerlo.
Tengo una matriz de objetos, cada uno de los cuales contiene un nombre y una URL, estoy mapeando cada elemento para poder obtener datos de la URL y mostrarlos, sin embargo, hay cientos de elementos, lo que significa cientos de solicitudes de búsqueda.
Esto es lo que tengo:
Índice.js:
const fruits = [ { name: "apple", url: "http://foo" }, { name: "banana", url: "http://bar" }, ]; const App = () => { return fruits.map((fruit) => { <FruitContainer fruit={fruit} />; }); };FruitContainer.js
const FruitContainer = (fruit) => { const [fruitData, setFruitData] = useState({}); const getFruitData = async () => { const data = await fetch(fruit.url); let json = await data.json(); setFruitData(json); }; useEffect(() => { getFruitData(); }, []); return ( <> <Text>{fruitData.name}</Text> <Text>{fruitData.color}</Text> </> ); };en lugar de mapear en el contenedor principal, envíe una matriz al componente secundario y luego cree un efecto de uso y dentro de useeffect pase una condición if pase una condición y luego haga el resto de sus solicitudes; de lo contrario, será lento use la importación dinámica