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.
