FETCH WATERFALL IN REACT

Summary from the TLDR Web Dev newsletter

A “fetch waterfall” is a common data fetching issue in React. It happens when you create a hierarchy of components that fetch their own data and show “loading” states before child components are rendered. There are a couple of ways to resolve this: by fetching data from the server (it’s not always as simple as using a server component), hoisting the data fetching to a higher level component, or through Suspense, which triggers the whole component tree’s fetches in parallel.