Creé un gancho personalizado useFetch simple que me permite llamar a cualquier URL que desee:

 import React, { useState, useEffect } from 'react'; export default function useFetch(url) { console.log(url) const [data, setData] = useState([]); useEffect(() => { fetch(url) .then((response) => { if (response.ok) return response.json(); setData([]); }) .then((data) => { setData(data)}) .catch((err) => { console.error(err); setData([]); }); }, [url]); return { data} ; }

En mi componente principal, estoy cargando una lista estática de elementos (a través de useEffect con [] porque es estático)

Actualmente lo hago a través de:

 export function Courses() { const [langs, setLangs] = useState([]); useEffect(() => { getData(config.url).then((f) => setLangs(f)); }, []); ...

Donde getData es:

 export function getData(uri) { return fetch(uri).then(response => response.json() ); }

El problema es que no puedo (no sé cómo), puedo usar mi useFetch aquí porque no puede estar dentro de useEffect , y es por eso que he creado el método getData adicional .

pd-

En otro componente de "details" uso useFetch perfectamente bien:

 export default function Details({ langId }) { const { data: teachers } = useFetch(`${config.url}/${langId}`); ...

El problema está solo en el componente principal donde no quiero buscar manualmente. Quiero usar mi useFetch . Cómo puedo hacer eso ?

Quiero que Courses cargue la lista estática solo una vez a través useFetch