In this talk “Conquering React concurrency,” presented at WebExpo 2025, full-stack React developer Ariel Shulman delved into the often-overlooked subject of concurrency within React. With a passion for exploring the underpinnings of technology, Ariel provided attendees with valuable insights into the challenges and opportunities presented by React’s concurrent model, especially since the advent of React 18.
The intricacies of concurrency
Ariel commenced the discussion with a crucial distinction: the difference between concurrency and parallelism. “Parallelism is when you are doing stuff at the same time,” she asserted, illustrating this with a forever-relevant reference to SpongeBob SquarePants cleaning his house (you have to see her recording below). However, concurrency, she explained, is about designing workflows that allow for efficient task management, even with limited resources. This conceptual understanding is vital for front-end developers working within the JavaScript environment.
Using the historical example of McDonald’s in the 1940s, Ariel elaborated on how concurrency was used to streamline fast food operations: “The McDonald’s brothers would call this the speedy system. I call this concurrency.” This analogy not only captured the essence of how effective resource distribution can lead to continuous output but also set the stage for exploring React concurrency.
Understanding limitations in front-end development
Ariel then tackled the formidable limitations faced by front-end developers, particularly those stemming from JavaScript’s single-threaded nature. She labelled these limitations as JS, FPS, and UPR—where JS refers to JavaScript’s single-threaded execution, FPS stands for frames per second, and UPR stands for Users Patience Rates, a term she coined to encapsulate user expectations during interaction.
“Users are toddlers,” Ariel quipped, highlighting the varying levels of user patience during interactions. She pointed out that while users can tolerate slight delays, they demand responsiveness when engaged in intensive interactions like typing or dragging. This broad analysis of user experience made it clear why concurrency is not just an abstract concept but a practical necessity in contemporary web development.
The evolution of React: Past and present
Transitioning into the evolution of React, Ariel drew attention to the framework’s inadequacies prior to the introduction of the concurrent model in React 18. Before this update, rendering was synchronous, meaning that if a user typed into an input box while the application was rendering results, they would often experience delays or dropped frames. “This time difference is long. This creates frame dropping. Frame dropping creates sad users. Sad users create sad developers,” she remarked, stressing the cascading effects of poor user experience.
The introduction of the fibre reconciler in React 16 marked a turning point, allowing for the splitting of work into smaller units. This shift enabled React to operate more efficiently, positioning it to leverage the capabilities of concurrency as a scheduler. Ariel noted, “React is a scheduler,” which indicates that state updates are not executed immediately but are scheduled for optimal performance.
Innovations in concurrency with React 18
With React 18, Ariel illustrated how developers can now communicate more effectively with the framework regarding task prioritisation. She discussed the new APIs that facilitate non-blocking rendering and the ability to distribute work more strategically. One notable enhancement is the suspense component, which helps developers manage “smaller stacks” of rendering work effectively, thereby improving the user experience.
While exploring the hooks useTransition and useDeferredValue, Ariel expressed her reservations about these convoluted names. However, she acknowledged their utility in solving problems that stem from rendering delays. “What if rendering this result set takes a really long time?… we can respond and be responsive to user interaction,” she explained, demonstrating how these hooks allow for background rendering that does not interfere with user input.
A paradigm shift: Server components
Toward the end of her presentation, Ariel examined the concept of server components, proclaiming it as a significant paradigm shift within the React ecosystem. “React server components are basically components that are rendered on the server,” she stated, illustrating the benefits of server-side rendering in alleviating the limitations associated with client-side environments. She emphasised that this shift not only improves loading times but also empowers developers to create more resilient applications by reducing the burden on clients.
Nearing the conclusion of her talk, Ariel invited WebExpo attendees to rethink the boundaries between client and server components. She challenged the traditional view by posing the question: “What is the nature of the boundary between the client and the server?” She argued that serialisation plays a crucial role, stating, “Functions are not serialisable,” therefore influencing where components should be rendered.
The session concluded with Ariel summarising her main points regarding the concurrent model, the benefits of splitting work, and how modern React APIs enable developers to enhance user experiences.
For those who wish to explore the detailed insights and frameworks discussed by Ariel, both the video recording and slides from her presentation are available here: