React Summit

React Summit 2023

React 18's concurrent rendering, specifically the useTransition hook, optimizes app performance by allowing non-urgent updates to be processed without freezing the UI. However, there are drawbacks such as longer processing time for non-urgent updates and increased CPU usage. The useTransition hook works similarly to throttling or bouncing, making it useful for addressing performance issues caused by multiple small components. Libraries like React Query may require the use of alternative APIs to handle urgent and non-urgent updates effectively.

React 18! Concurrent features! You might’ve already tried the new APIs like useTransition, or you might’ve just heard of them. But do you know how React 18 achieves the performance wins it brings with itself? In this talk, let’s peek under the hood of React 18’s performance features: - How React 18 lowers the time your page stays frozen (aka TBT) - What exactly happens in the main thread when you run useTransition() - What’s the catch with the improvements (there’s no free cake!), and why Vue.js and Preact straight refused to ship anything similar

React Concurrency, Explained

Ivan Akulov

React Advanced

React Advanced 2021

The workshop covers the new features of React 17 and React 18, including suspense, error handling, and concurrent mode. It emphasizes the importance of hands-on learning and typing code instead of just copying. The workshop explores using suspense and error boundaries to handle errors and improve the user experience. It also introduces new features in React 18, such as start transition and useTransition, to enhance responsiveness. The interaction between suspense and start transition is discussed, highlighting their collaboration in handling fallback UI and communication.

With the release of React 18 we finally get the long awaited concurrent rendering. But how is that going to affect your application? What are the benefits of concurrent rendering in React? What do you need to do to switch to concurrent rendering when you upgrade to React 18? And what if you don’t want or can’t use concurrent rendering yet? There are some behavior changes you need to be aware of! In this workshop we will cover all of those subjects and more. Join me with your laptop in this interactive workshop. You will see how easy it is to switch to concurrent rendering in your React application. You will learn all about concurrent rendering, SuspenseList, the startTransition API and more.

Concurrent Rendering Adventures in React 18

Maurice de Beijer

React Summit 2020

This workshop explores suspense, lazy loading, bundle splitting, and data resources in React. It covers UI approaches to make applications appear faster and concurrent modes for more responsive applications. React.lazy is used to optimize loading and bundle size, while React Suspense is used to suspend rendering until components are loaded. Data resources can be created using the same principle as React.lazy. The workshop also discusses error handling, parallel suspense, and fetching data before rendering. Concurrent modes offer a solution to rendering delays and event handling in single-threaded JavaScript environments.

React keeps on evolving and making hard things easier for the average developer. One case, where React was not particularly hard but very repetitive, is working with AJAX request. There is always the trinity of loading, success and possible error states that had to be handled each time. But no more as the `&lt;Suspense /&gt;` component makes life much easier. Another case is performance of larger and complex applications. Usually React is fast enough but with a large application rendering components can conflict with user interactions. Concurrent rendering will, mostly automatically, take care of this. You will learn all about using &lt;Suspense /&gt;, showing loading indicators and handling errors. You will see how easy it is to get started with concurrent rendering. You will make suspense even more capable combining it with concurrent rendering, the `useTransition()` hook and the &lt;SuspenseList /&gt; component. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Getting Started with Suspense and Concurrent Rendering in React

React Advanced 2023

Today's Talk introduces concurrent React and highlights the importance of fast and slow updates in user interfaces. It explains how concurrent rendering improves UI performance by allowing fast updates to proceed without being blocked by slow updates. The concept of assigning priorities to renders is discussed, with high priority renders being synchronous and low priority renders being interruptible. The Talk also mentions the benefits of using concurrent features in navigation and list filtering. Overall, concurrent React enhances rendering with interruptibility and prioritization, making the application feel faster and more responsive.

UI’s are composed of fast parts, and slow parts in terms of how responsive they are to user interaction. React's concurrent renderer decouples the fast parts from the slow parts by allowing us to render the slow parts in the background without blocking the fast parts, so that each part can respond to user interaction at its own pace. In this talk, we'll explore Concurrent React, understand what problems it solves, how it works and how to leverage it through the use of concurrent features.

#react concurrent mode