The Talent500 Blog

4 main reasons why React re-renders

Gaurav Kumar

React developers often build applications without ever giving the re-rendering process much thought. Most developers have enough understanding of React rendering to get by. To help you better understand re-rendering, our React experts created this article.  

What is a re-render in React?

React is known for its impressive performance, and it is made possible by the rendering of the objects on the screen. It happens in two major stages:

Re-rendering occurs when React updates the app with some new data, often resulting from user interaction with the app. This is why non-interactive apps with no asynchronous data to handle never need re-render and the associated optimizations.

What is a necessary and unnecessary re-render?

Not every React re-rendering is necessary, and even not advised.

Necessary re-render is when you need to re-render a component that is the source of the changes in an app. Re-rendering is also helpful for parts that directly use any new information. For instance, a part that manages the user input’s state needs to update or re-render at every keystroke.

Unnecessary re-renders are propagated through an app due to several re-render mechanisms. It can be due to React coding mistakes or inefficient app architecture. For example, if instead of a part, the entire application page re-renders on every keystroke when a user types in an input field, the page re-rendering is unnecessary.

Fortunately, unnecessary re-renders are not an issue. React is very fast, and there is no noticeable difference in performance if some components re-render unnecessarily. However, too often, unnecessary re-rendering of weighty components can lead to poor user experience.

When does the React component re-render itself?

There are four main reasons why a React component would re-render itself:

For some developers, this might not be the complete list, as React developers tend to believe that re-rendering happens when a component’s props change. That’s not entirely true, as you will know in a short while.

1. Re-renders due to state changes

A component’s state change triggers re-render. Usually, in a React code when a component either uses a callback or in useEffect hook, the state changes which is the source of re-renders in most cases.

Consider the following code:

import { useState } from “react”;

import “./styles.css”;

const App = () => {

  const [state, setState] = useState(1);

  const onClick = () => {

   setState(state + 1);

  };

console.log(“Re-render number: “, state);

  return (

   <>

    <h2>Open console, click a button</h2>

<p>Re-render because of state change should be logged on every click</p>

    <button onClick={onClick}>click here</button>

   </>

  );

};

export default App;

Here re-render happens as highlighted here:

https://www.developerway.com/assets/react-re-renders-guide/part2-state-changes-example.png

2. Re-render due to parent re-renders

A component will re-render itself if its parent re-renders and vice versa. It can also be stated that when a component re-renders, it re-renders all its children. The re-render of the components is always down the tree, i.e., if a child re-renders, it will not re-render the parent. However, there are some caveats here, and you must check out this post on React Element, children, parents, and re-renders.

3. Re-renders due to context changes

When the value of a Context Provider changes, all the components that use that Context Provider will re-render. This will happen even if the components do not use the changed value directly. These kinds of re-renders cannot be prevented with memoization directly, and React developers need to find different approaches depending on their code to stop them.

Here’s an example:

  const value = useMemo(

   () => ({

    value: state

   }),

   [state]

  );

  return (

<Context.Provider value={value}>

    <button onClick={onClick}>click here</button>

    {children}

</Context.Provider>

  );

};

const useValue = () => useContext(Context);

const Child1 = () => {

  const { value } = useValue();

console.log(“Child1 re-renders: “, value);

  return <></>;

};

const Child2 = () => {

  const { value } = useValue();

console.log(“Child2 re-renders”, value);

  return <></>;

};

const App = () => {

  return (

   <Provider>

    <h2>Open console, click a button</h2>

    <p>Both children will re-render because of context</p>

    <Child1 />

    <Child2 />

   </Provider>

  );

};

export default App;

When you run this code in the console and click the button, both children will re-render because of the Context.

4. Re-renders due to hook changes

Whatever happens within a hook is directly associated with its component. As with Context and State changes, any change within a hook triggers component re-render. Whenever the state inside the hook changes, it will trigger an unpreventable re-render of the “host” component. Also, if the hook uses Context and its value changes, the host component will be re-rendered.

Conclusion 

React re-render is an essential concept to understand for React developers. Preventing unnecessary re-renders is necessary for React app performance and efficiently utilizing resources. The listed four scenarios are how React re-renders components.

Talent500 is the global platform companies use to hire talented React developers. Sign up here and join our elite talent pool.

 

0