Hooks and Suspense- React’s Class Warfare
2019 will see the arrival of some new key features to the React library. “Suspense,” “Hooks” and “Concurrent Rendering” will be, or are already being implemented over the course of the year and intend to enhance the performance of DOM rendering and the management of a-synchronous operations.
“Suspense” gives React developers the ability to suspend the rendering of a component while it’s waiting for the resolution of other a-synchronous operations. For example, allowing for a fallback DOM element or component such as a load spinner to be rendered, until a fetch request has been completed. While it is currently possible to do this in React, “Suspense” will prevent the need to create complex logic to manually check a loading state that displays fallbacks in the interim until content data is ready to be rendered. This creates much cleaner, more legible code and a more efficient way of handling a-synchronous data requests.
“Suspense” is used in tandem with React’s .lazy(), a new API that helps in code splitting and importing components on demand rather than by default. React.lazy() is implemented by taking a function that must make dynamic import call. This must return a Promise “which resolves to a module with a default export containing a React component.” The image below, shows an example of how Suspense and lazy work concurrently to display a fallback load “Spinner” component until the “OtherComponent” has resolved any dependent fetch requests.
“Concurrent Rendering,” similarly with “Suspense,” can pause expensive rendering processes to make high priority DOM updates first. It can be used in combination with “Suspense” to improve user experience by “skipping unnecessary loading states on fast connections.” “Concurrent Rendering” works behind the scenes to improve a React app’s performance. Currently this feature has not been completely implemented by React and is available only within an unstable api with limited documentation.
“Hooks” allow function components to use state and lifecycle features. This creates less complexity in navigating between function and class components and allows for the sharing of stateful logic in a way that is de-coupled from the component itself, thereby simplifying the process and circumventing the need to introduce nesting into your component tree. The example below shows how hooks can be used to manage the state of a counter:
“useState” is a “Hook” that is called inside the function component and returns a state key “count” and its “this.setState” function, “setCount.” This function can then be called in event handlers in the same way that ‘this.setState” had been utilised. “useState” also takes an argument, which then assigns the state key’s initial value.
“Hooks” can also be used with multiple state variables and more than once in a single component as shown in the example below:
Although there is somewhat of a learning curve in implementing “Hooks,” the potential improvement that this feature offers to an apps’ overall functionality is undeniable. While React currently has no plans to deprecate Classes, it’s clear that their redundancy is inevitable.
Resources:
https://hackernoon.com/magic-of-react-suspense-with-concurrent-react-and-react-lazy-api-e32dc5f30ed1
