[FIXED] How to use React.Suspense with a api call?

Issue

I've read the doc about React.Suspense, it seems great, but how can I use it while performing an api call, with axios for example?

To be more specific, why this code doesn't work?

export default function Foo(){
const [state, setState] = useState()

useEffect(()=> {
    axios.get("url")
    .then(res=> setState(res.data))
    .catch(_=> setState(null)
}, [])

return (
    <Suspense fallback="loading data">
       <div>hello {state.name}</div>
    </Suspense>
)
}

Thanks!

Solution

Suspense is used to asynchronously load Components, not APIs. It's used to lazily load components imported using React.lazy.

Even if you manage to render your component it'll not make any difference in your case. You'll need it for a different use case

Answered By - Tan Kim Loong

Answer Checked By - Pedro (PHPFixing Volunteer)