Recently, React announced a feature of the React ecosystem — . This would allow us to stop or delay the execution of components for the time that we need. It’ll help React apps stay responsive and gracefully adjust to the user’s device capabilities and network speed. Concurrent Mode Concurrent Mode consists of a set of new features — one of the biggest ones is and a new approach to data fetching. Suspense Basically, there are three ways to do it: We start rendering components and each of these components may trigger data fetching in their effects and lifecycle methods. A good example of that is in . Fetch-on-render: fetch useEffect Start fetching all the data for the next screen as early as possible. When the data is ready, render the new screen. We can’t do anything until the data arrives. The example of that is having a component that handles data fetching and conditionally renders the child presentational component once we’ve received everything. Fetch-then-render: Container Start fetching all the required data for the next screen as early as possible, and start rendering the new screen . As data streams in, React retries rendering components that still need data until they’re all ready. Render-as-you-fetch: immediately, even before we get a network response I believe that the concepts of the first two approaches are well known and definitely presented in your code. Let’s dive straight into the render-as-you-fetch approach. Render-As-You-Fetch You’ve probably noticed that the explanation of this approach has two parts: Start loading data as early as possible. Start trying to render components that may still need data. Fetch early Let’s build an app together that loads major stock indexes. For that, we have a simple “Load” button. Once you click on it, we start loading data immediately: App = { [prefetchedIndexes, setPrefetchedIndexes] = useState(); ( <button
        onClick={() => {
            setPrefetchedIndexes(prefetchQuery(`${API}/majors-indexes`));
        }}
      >
        Load all indexes
      </button> <IndexList prefetchedIndexes={prefetchedIndexes} />
      )}
    </>
  );
}; const => () const return <> {prefetchedIndexes && ( is a function that performs the request and returns an object that we’re going to pass to the component. The key takeaway from this example is that we’re triggering fetch from the event and not in the render phase. prefetchQuery fetch <IndexList /> onClick Render early with Suspense The second part of the example above is that we’re saving the object from to the state and starting to render immediately as well. prefetchQuery <IndexList /> On the other hand, we also don’t want to render the list with empty data, so ideally, we’d like to be able to suspend render until we have all the data without writing . if (isLoading) return null Luckily, we have for exactly that purpose. the Suspense component Suspense is 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. Let me show you an example: IndexList = { data = usePrefetchedQuery(prefetchedIndexes); data.majorIndexesList.map( ( ));
}; App = { [prefetchedIndexes, setPrefetchedIndexes] = useState(); ( <button
        onClick={() => {
            setPrefetchedIndexes(prefetchQuery(`${API}/majors-indexes`));
        }}
      >
        Load all indexes
      </button> <Suspense fallback={<span>Loading indexes list...</span>}>
          <IndexList prefetchedIndexes={prefetchedIndexes} />
        </Suspense>
      )}
    </>
  );
}; const ( ) => { prefetchedIndexes } const return => index Show {index.ticker} < = > div key {index.ticker} </ > div const => () const return <> {prefetchedIndexes && ( To take advantage of Suspense, you just need to wrap your component with it. It accepts a prop: the element that you want to show while waiting for data. fallback How To Fetch Data in Sync With Suspense? Now that you know about Suspense and prefetch practices, you wonder how this all works together. So, here is the last piece of this puzzle. To solve it, let’s finally check out the function. prefetchQuery { status = ; result; suspender = promise.then( {
      status = ;
      result = r;
    },
    e => {
      status = ;
      result = e;
    }
  ); {
    read() { (status === ) { suspender;
      } (status === ) { result;
      } (status === ) { result;
      }
    }
  };
} usePrefetchedQuery = prefetchedQuery.read(); prefetchQuery = { promise = fetch(input, init).then( response.json()); wrapPromise(promise);
}; ( ) function wrapPromise promise let "pending" let let => r "success" "error" return if "pending" throw else if "error" throw else if "success" return // Function that reads resource object // It could also include Cache logic export const => prefetchedQuery export const ( ) => input, init // Make fetch request const => response // Return resource for Suspense return Don’t be scared by the complexity of it, it’s actually fairly simple. First, we take a URL and pass it to the native function, receive a promise, and pass it to the function. fetch wrapPromise This function returns an object with the method: read() If a promise is still pending, we throw this promise. If a promise is resolved with error, we throw the error. If a promise is resolved, just return the data. In fact, the only difference we have, compared to traditional fetching practices, is throwing a pending promise. When you have in , it just executes the method. If data is not there yet, it throws a promise before actually rendering anything and will catch that. usePrefetchedQuery IndexList read() Suspense How To Experiment With This? The React team introduced branch with a modern API. an experimental releases For that, you need to run and play with it locally. I also created a live example on for you that shows everything I did together in one working project. npm i react@experimental react-dom@experimental CodeSandbox Can I Use It in My Production Projects? Concurrent mode is still under development and some implementation details could change. Use experimental versions to get familiar with new concepts and maybe propose your own ideas. No. For example, how to integrate prefetch practices in routers or provide a good way to cache data. Further Resources . An experimental version of Relay with Suspense Soon, you’ll be able to connect preload functionality to routers. Have a look at or . https://github.com/ReactTraining/react-router/pull/7010 Navi router . Introduction to Concurrent mode . Introduction to Suspense for data fetching . Live sandbox with examples

Fetch

Pressure Makes Better Programmers Faster

React Hooks: Performance Pitfalls And How To Easily Avoid Them

Follow my thoughts on Twitter

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

How To Implement The Prefetch Pattern in React Concurrent Mode

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Web Standards 101

Loading Components Conditionally on Mobiles, Tablets and Desktop in ReactJS

The Noonification: Reduce Javascript: Master the Basics (1/11/2023)

The Noonification: Satoshi Might Be a Bitcoin ETF Skeptic (1/13/2024)

The Noonification: Small Puddle of Freedom (11/25/2022)

Web Standards 101

Loading Components Conditionally on Mobiles, Tablets and Desktop in ReactJS

The Noonification: Reduce Javascript: Master the Basics (1/11/2023)

The Noonification: Satoshi Might Be a Bitcoin ETF Skeptic (1/13/2024)

The Noonification: Small Puddle of Freedom (11/25/2022)

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps