As days go by I get more and more excited about what the React core team is coming up with. I thought I would share the update with fellow devs and share this excitement with all of you:
React 16 was about new apis and native components (like hooks, error boundaries and fragments). This time React will be bringing focus upon how the real world users actually use our web applications (especially on mobile). They will be focusing upon:
- How an application’s state will be managed on devices with low processing capabilities
- How the users will interact with web applications under low network bandwidth conditions
Which brings us to…
Suspense
With Suspense, React can pause any state update until the data has been fetched and is ready to be rendered. In other words, React will suspend your whole component tree while waiting for the data to be fetched.
How Suspense works
Let’s take the case where our user has a poor network. In this scenario, Suspense will load certain components of the application and other loading components can ensure that the application is accessible for the user.
In a Demo that Dan Abramov gave, he used the upcoming createFetcher API. Using the cache API, the system will allow devs to suspend the data fetching request within the render method. Here is an excerpt from the createFetcher function (as seen in Dan’s demo).
# TL;DR
function createFetcher(method) {
let resolved = new Map();
return {
read(key) => {
if (!resolved.has(key)) {
throw method(...args).then(val => resolved.set(key, val));
}
return resolved.get(key);
}
};
}
Usually, in React application, components are cached from the context. It is possible to use a fake cache to display in low network bandwidth. With the help of Suspense, the application can fetch the data while still being fully interactive.
Time Slicing
In React, fiber async rendering was not implemented because:
- There is a backward compatibility issue
- A memory leak issue opens the door for the potential occurrence of Race conditions
Time slicing makes async rendering easier and safer to use.
Rendering a heavy user interface (UI) on a low-end phone may end up delivering an inferior user experience.
This (time slicing) feature splits child component into various chunks during ideal callback, that renders over multiple frames. This feature will not wait for high priority updates instead it finishes low priority updates before handling high priority updates. It also handles CPU’s allotting and scheduling task with minimal intervention from the dev side.
React Life Cycle Methods
React component life cycle has three categories:
- Mounting
- Updating
- Unmounting
Each component has a different method
- render() is most used in life cycle method
You cannot set state in render() method - componentDidMount() triggers as soon as component is mounted
You can set state here - componentDidUpdate() triggers as soon as update happens
Here also you can set the state - componentWillUnmount() triggers before the component is unmounted or it’s destroyed
This is mostly used for performance optimization
But following method names has changed in React 17:
- componentWillMount
- componentWillUpdate
- componentWillRecieveProps
It has come with new prefix UNSAFE usage i.e, the method can be:
- UNSAFE_componentWillMount
- UNSAFE_componentWillUpdate
- UNSAFE_componentWillRecieveProps
get Snapshot Before Update
This method is called before the DOM is updated. This handles what componentWillUpdate(). The value which is returned by getSnapshotBeforeUpdate() is passed to componentDidUpdate() once the DOM is updated.
This method is mostly used to resize the window of the application during async rendering.
get Derived State From Props
This handles what componentWillRecieveProps(). This is a safer replacement for componentWillRecieveProps(). This method is called when it receives a new prop or after component creation.
You should really watch the original Dan Abramov video introducing these new features at jsconf 2018.