Improved React application performance optimization.

Tram Ho

React is very fast. I actually found it very quickly. That’s what makes React really great.

But if you want to optimize your app there are a few things you can do.

Today we will see how the two most useful technologies provided by React solve performance problems.

1. Start with a simple example.

For a simple example, we have a Display component that displays a single line of text.

This component is a child of the Controller component, in which the Controller also contains a button that increases the value of the count variable in the state when clicked.

We add console.log(...) to detect whether our Display component has been re-rendered or not.

Now when we click on the button inside the Controller and open the console.

Although we have no effect on the Display component, it is always re-rendered every time we click on the button.

This is not okay at all. What if we used this Display component on the entire project?

Performance will be completely broken.

2. What is Memoization?

Memoization is a familiar technique used in many places. It also does nothing but caching.

According to Wikipedia it is defined as follows:

In computing, memoization or memoisation is an optimization technique used to speed up computer programs by returning the results of expensive function calls and returning the cached result when the same inputs occur again.

So, If memoization is a technique that improves function performance, can we apply it to a functional component?

Yes, thankfully we can do it. React gives us a feature called React.memo()

Now, let’s see how to solve the above problem.

3. Use React.memo () to block re-render (re-render).

React.memo() takes two parameters:

  • The first is the function we want to memorize (memorize).
  • The second is a function that has the same functionality as shouldComponentUpdate() (optional). We’ll call it later,

Now, see what happens if we rewrite the Display component like so …

Amazingly, our component didn’t re-render every time the button was clicked.

4. Let’s go one step further.

Okey, now we have an optimized component. But the problem is this component is dumb, it only displays one line of text. has no effect at all. I want Display ‘s content to depend on some props passed to it.

Now will rewrite the Display component for it to show a list of people names.

Each click on the button adds a new name to the state.

We’ll see another name added to the names list every time we click the Add Name button.

But nothing happened. Why so ? We will answer this question in the next section.

5. Mutable vs Immutable.

To solve this problem, we have to really understand Immutable .

On the line newNames = names , we thought that we would assign names to the new variable newNames but actually arrays in Javascript didn’t work that way.

When executing the above command, it will assign the reference of the names array to newNames . As a result, the contents of the names array changed but the reference did not change.

And of course we all know React only re-renders when the state changes, so running the addName() function addName() absolutely no effect.

We solve this problem by rewriting the function addName() as follows …

The ... (spread operator) returns a new array and assigns it to newNames .

Now if we click on the button, we can see the re-rendered component.

6. When React.memo fails, use useCallback () to solve it.

Take another example. We create a component similar to the previous example, which will add a new name every time we click on the button.

And we have another component to clear the list of names above.

Now, we click on the Add Name button. ClearButton component has been re-rendered, this is not necessary.

To solve this problem we can use a hook called useCallback() . This useCallback() hook helps us prevent re-computing ( clearNames ). It is powered by React and can be imported as follows …

And we can rewrite the clearNames function like this …

Yeee, our problem is no more!

To sum up, here are some of the things you can use to improve your React application. But the good things often come with traps. So please try to use it wisely to avoid eating bugs.

What do you guys do to optimize React application performance, please comment for yourself and everyone for reference! Happy Coding!

Looking for more information :

Share the news now

Source : Viblo