avatar

Derek Zeng

Loneliness is the gift of life

Async rendering in React

Async rendering is a coming new feature in React.

I first heard this feature, when I just switched to React in NinjaVan. Being away from React for a while, I had no idea how important this feature is.

Having worked on React for 3 months now, I started to realize that this feature can pretty much make most of the React apps much simpler.

Here is why. The most popular boilerplate of React uses Redux + Saga to do async loading of pretty much everything. Other use similar Redux + Thunk combo to do same thing. This is because, it is hard to async load data in a Component and then trigger the change. One way is use setState, another is to use forceUpdate, neither of which is elegant and scalable. With Redux + Saga, pretty much every response is stored in the global redux store. When a change is triggered, any component that is subscribed to the store can get updated.

This is in my opinion inelegant as well. Because you basically has to cache all the response in global memory even maybe only one sub Component needs it. It is possible to share global cache, but if you need it to be flexible, then you got to use selectors, which is itself another topic.

However, what we really hope is that, Component render normally while waiting for the async request to complete. And when it's completed, the component has to update. This also means that, a Component can take in a Promise as prop, and has a way to resolve it and re-render.

Yeah, this is exactly what async rendering promises us. In fact, this is something Angular 2 already have way back before. But now React enables it finally.

There are still many goodies in the coming React 17.0 release. The React team had rewritten reconciler from stack based to fiber based. In such way, they are able to have more control on the stack fragments like small coroutines. This makes async rendering possible. This is how I image they implemented it.

When I have more time, I will definitely dig more on this topic. It's so interesting.

(End of article)