How to minimize main thread work in React Component

Many a time when we audit our site, we get suggestions to minimize main thread work.

Reducing the main thread work can help you achieve better performance for your web apps.

In this article, we will try to look out for different approaches on how to minimize the main thread work by making some tweaks in the react component.

If you don't know what is the main thread you can easily look here

Let’s get started

We will create a component where we display team size, list of team members, and team name.

In the above snippet here we are accepting three props:

teamMembers,
name and
size.

I have three different APIs to get team size, name, and list of available members.

Depending upon our backend API the props will update and the component rendering takes place.

Anytime props name and size get a new value, the function showAvailableMembers() will be called, whose job is to display a list of team members causing our main thread to block for a while.