Traditionally in React, you’d set state, and your UI would update. This is all less complicated than it may seem. What we do want to do is indicate to the user that data are loading, while continuing to show either the old UI, or an alternative UI which indicates we’re waiting on data Suspense supports either, which I’ll get into. It means, if there are three data sources on the page, and one of them has completed, we don’t want to render that updated piece of state, with a spinner next to the now-outdated other two pieces of state.
Suspense provides low-level API’s that allow you to easily maintain your UI while your app is managing these things.īut what does “consistent” mean in this case? It means not rendering a UI that’s partially complete. That said, Suspense is all about maintaining a consistent UI in the face of asynchronous dependencies, such as lazily loaded React components, GraphQL data, etc. There’s always a chance it will change between now and when it’s fully complete, so please bear that in mind. That means - and React’s docs say the same - not to lean on it yet for production-ready work. Kingsley Silas provides a thorough overview of it, but the first thing to note is that it’s still an experimental API. Besides, using vanilla JavaScript will give us a better look at how Suspense works. My own side project has a simple enough routing story that I always just did it by hand. If you’re wondering about React Router, it seems great, but I’ve never had the chance to use it. For routing, I’ll be using vanilla JavaScript, and I’ll be using my own micro-graphql-react GraphQL library for data.
REACT NOT RENDERING TO PUG TEMPLATE ROOT HOW TO
We’ll look at how to integrate routing and data loading with Suspense in React. This post is about understanding how Suspense works, what it does, and seeing how it can integrate into a real web app.
0 kommentar(er)
