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> </> ); };