El siguiente código es un ejemplo simplificado de mi problema. Están sucediendo muchas más cosas en el código base real, así que supongamos que mi función useHook debe ser asíncrona y no podemos simplemente obtener los datos dentro del gancho useEffect.
Actualmente representa {} , pero quiero que represente "Data to be displayed"
const fetch = async () => { /* This code can't be changed */ return "Data to be displayed" } const useFetch = async () => { // This function must be asynchronous let data = await fetch(); return data; }; const App = () => { const data = useFetch(); const [state, setState] = useState(data); useEffect(() => { setState(data); }, [data]); return <h1>{JSON.stringify(state)}</h1> } export default App;cambiar const data = useFetch(); to const data = await useFetch();
Mover llamado dentro de useEffect así:
const App = () => { const [state, setState] = useState({}); useEffect(() => { const fetchData = async () => { const data = await useFetch(); setState(data); } fetchData() }, []); // [] load first time return <h1>{JSON.stringify(state)}</h1> }