Concurrent Rendering in React - Andrew Clark and Brian Vaughn - React Conf 2018

React Conf · 81K views · 2018 · 42:13

Open on YouTube

Web developmentSoftware architecture & designtalkdated

Why Stack Overflow recommends it

Stack Overflow users link it when explaining how React Concurrent Mode and Suspense prevent UI freezes and could simplify handling async data loading.

Recommended by 3 people across 3 different months, 2018 to 2019.

What it is

A React Conf 2018 talk by Andrew Clark and Brian Vaughn on React's concurrent rendering work. It covers time slicing for keeping the UI responsive under heavy updates and Suspense for data fetching, with demos from the React team.

What people said

Recommends Mansour · 2018-12 · Stack Overflow · on “Is server-side rendering always efficient?”

Long story short sentence nothing is always efficient. Specially in computing world. But as @Abhishek Mehandiratta mentioned the spirit of the Server-Side Rendering(SSR) is to decrease the initial render time. While decreasing the initial load has a huge impact in term of user experience its still has it's own trade off. I would say the benefit that a company gets from efficiency and user experience of the initial render is far superior to the impact that is to the server load. There is still a space for debate, it still depends on the requirements and the use case. Considering Facebook user-interface with 30 000 react component [LINK] (including mobile and web) might be different to compare

Recommends tbuglc · 2019-01 · Stack Overflow · on “How to show progress of Axios during get request (not download or upload)”

You're welcome. You may also find this talk by **Andrew Clark** `Concurrent Rendering in React`[ [this video] ] interesting

Recommends Alan · 2019-07 · Stack Overflow · on “React non-blocking rendering of big chunks of data”

React Concurrent Mode [LINK] is solving the UI stall problem. You can watch some talks [1] [this video] [2] [LINK] to understand how. This doesn't make your UI magically update faster, it only helps you make the UI not freeze while your UI updates. Your two options are to either: update the state in chunks, as you said. If you chunk the work don't just do so based on time: you can't hard-code an optimal value based on time because people's computers perform differently. Instead either use the browser APIs like requestIdleCallback or look into the scheduler NPM library ( [LINK] ) in order to do the work as aggressively as possible but in a scheduled manner that doesn't lead to browser hangs. or us

Cites Ryan Cogswell · 2018-11 · Stack Overflow · on “Redux - Handling multiple simultaneous requests”

Hopefully within a couple months, you'll be able to handle this very easily using the new fetcher/createResource concepts in conjunction with Suspense. You can see a description of this in Andrew Clark's Concurrent Rendering in React presentation [this video] around minute 25. But that is a future feature (Suspense is already available, but only integrated with code-splitting, not yet integrated with API calls). So, for now, you have two main options: use a counter that you increment/decrement as you start/end api calls (it looks like Ori Drori has just posted an answer with this approach) use multiple booleans -- one for each api call involved and show the loading indicator if any are true. The