How To Speed Up Data-Heavy React Components

Performance is very critical when building data-heavy applications. Every state change renders components. Managing states and rendering updates poorly may lead to slow applications and a bad user experience.

Simple Technique To Boost Performance

Every time state is updated, the component is rendered. By default, React thinks every component render is equal. It simply means that React tries to perform UI updates as quickly as possible. When working on data-heavy applications, every UI updates are not equal. Some updates can be de-prioritize to boost performance. React provides a simple technique called transitioning, which allows us to mark some UI updates as low-priority.

Example Code: heavy update as non urgent code

The above example has two UI components: the search box and the employee name list. The searched name is highlighted in the list whenever you type anything in the search box. An important thing to note here is that the query entered in the search box is not being displayed immediately. It is because React thinks all UI updates as of the same priority whenever the search query is updated. Since the name list is very long, it takes some time to render. The same reason is making the search box slow as well. Here the UI updates in the search box should be of high priority because whenever the user types something in the search box, it should be displayed immediately. The name list updates can be de-prioritized.

Let’s see how to do that in 3 quick steps.

Prioritizing UI Updates For Performance

By default, all updates in React are considered urgent. That could create a problem when heavy updates slow down quick updates.

Pic courtesy: medium.com

Before getting into the concept, it is important to remember that this feature is available in React 18 with concurrent mode enabled. To enable the concurrent mode in React, you need to update react and react-dom. Then replace from ReactDOM.render to ReactDOM.createRoot.

Pic courtesy: medium.com

React provides a useTransition hook which allows you to mark a UI update and low priority update so that other important UI updates and be performed quickly. Such as: In the above example UI update inside the search box is urgent, whereas the UI update for the name list can be marked as low priority update.

Pic courtesy: medium.com

const [isPending, startTransition] = useTransitionHook();

• isPending:indicates that the transition is pending
• startTransition(callback):allows you to mark any UI updates inside callback as transitions.

Pic courtesy: medium.com

Example Code: heavy update as non urgent code

In the above example, the search box UI update is urgent. It is done immediately, whereas the name list UI update is marked as a low-priority update. Whatever UI update is done inside startTransition is marked as a low priority update. This simple technique can boost up UI experience in data-heavy applications.

Build apps with reusable components like Lego

Pic courtesy: medium.com

Bit’s open-source tool help 250,000+ devs to build apps with components.

Turn any UI, feature, or page into a reusable component — and share it across your applications. It’s easier to collaborate and build faster.

Split apps into components to make app development easier, and enjoy the best experience for the workflows you want:

• Micro-Frontends
• Design System
• Code-Sharing and reuse
• Monorepo

For more information and to develop web application using React JS, Hire React Developer from us as we give you a high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft”.

To develop custom web apps using React JS, please visit our technology page.

Content Source:

1. medium.com