Re-rendering Components in ReactJS
Prerequisites: Introduction to React JS, React JS | Lifecycle of Components
A simple update of the state, from anywhere in the code, causes all the User Interface (UI) elements to be re-rendered automatically. However, there may be cases where the render() method depends on some other data. Re-render can be caused due to any of the three reasons listed:
- Update in State
- Update in prop
- Re-rendering of the parent component
Unnecessary re-renders affect the app performance and cause loss of users’ battery which surely no user would want. Let’s see in detail why components get re-rendered and how to prevent unwanted re-rendering to optimize app components.
Why do components get re-rendered?
Let’s have a deeper look at the three causes of re-rendering mentioned before.
- Update in state: The state change can be from a prop or setState change to update a variable(say). The component gets the updated state and React re-renders the component to reflect the change on the app.
- Update in prop: Likewise the change in prop leads to state change and state change leads to re-rendering of the component by React.
- Re-rendering of parent component: Whenever the components render function is called, all its subsequent child components will re-render, regardless of whether their props have changed or not.
React schedules a render every time state changes (scheduling a render doesn’t mean this happens immediately, this might take time and be done at the best moment). Changing a state means React triggers an update when we call the useState function (useState is a Hook that allows you to have state variables in functional components).
Example: Creating a simple Counter React Project will help to understand the concept of re-rendering components.
Prerequisite: Download VS Code and Node packages.
Step 1: Create a new React project named counter-app by running the below given command.
npx create-react-app counter-app
Step 2: Once the installation is done, you can open the project folder as shown below.
Step 3: After creating the React JS application, install the required module by running the below given command.
npm install react-desktop
Step 4: Open VS Code go to the explorer in VS Code (press CTRL+shift+E). Next, go to src folder->New file as shown. And name it Child.js (this is the child component).
Project Structure: It will look like the following.
Step 5: Edit the code in the App.js file as shown.
App.js File will have the following:
- A state declared which would change and cause re-rendering,
- A message in the console which tells the parent component is rendered.
- Will return a div which consists of a button (which will increment the count and eventually result in state change) and a child component which has a prop that doesn’t change but is re-rendered unwantedly.
The code gives a message each time the component’s render function is called. Each time the count button is clicked state change is triggered.
Step 6: Make a Child component by going on src folder->New File as shown and name it Child,js
Step 7: Write the following code in Child.js File
Child.js will have the following:
- A message in the console which tells the child component is rendered,
- Will return a div that has a heading that uses prop to get the name in it.
The code gives a message each time the component’s render function is called. Each time the count button is clicked state change is triggered. Each state change in the parent component triggers re-rendering of all its subsequent child components even if no props are changed.
Step to run the application: Open the terminal and type the following command.
How to prevent unwanted re-rendering of components?
If the child component is re-rendered without any change in its props then it could be prevented by using hooks. React.memo is the savior, it is a higher-order component that memorize remembers) the result i.e. React will skip rendering of that component and reuse the last rendered result. It checks for prop changes.
Example: Minor changes in the Simple Counter React project can prevent our project from unwanted re-rendering. Changes need to be done in the Child.js file as shown below.
Note: This method only exists as a performance optimization. Do not rely on it to prevent render, as this can lead to bugs.
Please Login to comment...