DEV Community

Cover image for React Performace Guide
bhupendra
bhupendra

Posted on

2 1

React Performace Guide

As we know, React re-renders the component whenever there is change in state or props. There is no magical binding or any watcher which observes the state variable and updates it , infact it re-rendering of component which updates the UI. Each render has it's own props, state, event-listeners and effects, this is very well explained by Dan.

The Problem

In below code, Parent Component has 5 child components and all are rendered again even if the change is not related to them.

image

Here is how performance in impacted by unnecessary re-renders of components.
re-renders

The Solution

The first line of defense to avoid unnecessary re-renders is using React.memo. React.memo will skip rendering the component, and reuse the last rendered result.
Let's wrap all the child components in React.memo.
image

react.memo
We managed to save 3 components from re-rendering on change of Name input field, but still Address Input field re-renders. React.memo only does a shallow comparison of props changes but the handleAddressChange function is recreated new for each render and since functions are compared by reference, React.memo will not able to stop it from re-rendering Input Component as it is prop is callback function, which is new for each render of Parent Component.

The way to optimize this scenario is by using useCallback hook.

image
Now we have re-rendering only for the components that require it, as callbacks are passed to optimized child components that rely on reference equality to prevent unnecessary renders

React-useCallback

💡 Now suppose if we have another requirement that is to validate address and show the suggestion. Address Validation API can take some time , lets see that in action

    const isValidAddress = () => {
    console.log(`validating Address... for ${city}`);
    for (let i = 0; i < 10000; i++) {
      //some delay to simualte address validation API
    }
    return city.length < 3 ? false : true;
  };
<!--  markup for address validation-->
 <Input
        target="Address"
        value={city}
        handleChange={memoizedAddressChange}
      />
      <span> Address is {isValidAddress() ? "" : ""}</span>
Enter fullscreen mode Exit fullscreen mode

For this example , let's assume if address length is less than 3 then it's invalid otherwise it's valid.

React.useMemo (1)

Now isValidAddress() which is an expensive fn, is getting called even if we are changing the name , it is happening due re-render of component due to change in name state.
We can memoize the result of addressValidation function when we are changing any other state and only recalculate when there is change in address field.

image

The optimized solution with useMemo saves time of unnecessary evaluation of any expensive function. ⤵
useMemoSoln

The difference between useCallback() and useMemo() is that useCallback is to memoize/memorize the callback function that are passed to as props and useMemo is helpful in memozing the result of any expensive calculation.


Here is full code example of above concepts:

Image of Datadog

How to Diagram Your Cloud Architecture

Cloud architecture diagrams provide critical visibility into the resources in your environment and how they’re connected. In our latest eBook, AWS Solution Architects Jason Mimick and James Wenzel walk through best practices on how to build effective and professional diagrams.

Download the Free eBook

Top comments (0)

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay