There are a few scattered references to "sideways data loading" in various React issues and elsewhere, but I haven't found a concise description of exactly what is meant by this term. Can someone clarify?
Suspense is a component for wrapping lazy components. You can wrap multiple lazy components at different hierarchy levels with a single Suspense component. The Suspense component takes a fallback prop that accepts the React elements you want rendered as placeholder content while all the lazy components get loaded.
Suspense is not a data fetching library. It's a mechanism for data fetching libraries to communicate to React that the data a component is reading is not ready yet. React can then wait for it to be ready and update the UI.
This means that while the component Shows is waiting for some asynchronous operation, such as fetching shows from TVMaze's API, React will render <p>loading... </p> to the DOM instead. The Shows component is then rendered only after the promises and APIs are resolved.
sideways loading is the concept that data is pushed directly to specific components, instead of from the parents (as is done in the initial rendering / vanilla react without subscriptions or observables). So basically you are not re-rendering the app again from the root, but only a specific part of your component tree.
One approach to achieve this is using observables as described here, and some flux frameworks help you with this as well.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With