Understanding React Concurrency

#408 – May 29, 2023

React v18.0 has broken ground by introducing a long-awaited feature: Concurrency! Unfortunately, despite a deluge of resources explaining how to use it, explanations of how it works are sparse. As it is a low-level feature, it’s not critical to understand React’s idea of concurrency, but it doesn’t hurt!

This is a guide outlining a very flexible approach to managing application state in React apps. Specifically, this is applicable to the SPA (Single-Page Application) build architecture.

A renderWithRouter wrapper function to simplify component tests and avoid mocking React Router.

Compared to an image or stylesheet, for example, a JavaScript file of the same size will take the same amount of time to download. The problem comes in the amount of processing after download that needs to occur before the JavaScript is fully execute.

React Query is a great library, but like any tool, you should choose it for the right problem