The Talent500 Blog
4 main reasons why React re-renders 1

4 main reasons why React re-renders

React is a well-known programming language that developers use because of its versatility. While many developers are familiar with the re-rendering process, it is essential to fully understand it if you wish to build something sustainable. Read this article to learn about the main reasons why React re-renders.

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:

  • Initial render: This happens when a component or object first appears on the screen.
  • Re-render: Second or any consecutive render of the element already on screen.

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:

  • State changes
  • Parent (or child) re-renders
  • Context changes
  • Hook changes

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
Gaurav Kumar

Gaurav Kumar

Gaurav is a senior frontend developer with over 6 years of experience in designing and building responsive web design and mobile apps in the financial industry. He is proficient with Javascript, React, HTML and CSS along with other JS Frameworks like Aurelia, Angular. He has an extensive knowledge of UX and user psychology as well. Gaurav has worked as a full stack developer with backend tech stacks like Ruby on rails, Java and Node.

Add comment