How re-render a component without using setState() method in ReactJS ?

Last Updated : 13 Nov, 2023

In React, to re-render a class-based component with an updated state we generally use the setState() method. But instead, we can use other methods to re-render a component without using setState().

Prerequisites:

Approaches to re-render a component without using setState() method are.

Table of Content

Steps to Create React Application:

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Project Structure:

Method 1: by changing props

If we pass the state of the parent component as a prop to the child and call setState on the parent, it will cause the re-render of the child component as its props are changed.

Example: This code implements re-render by changing the props passed to the component.

JavaScript

// Filename - App.js  import React, { Component } from "react";  class App extends Component {     constructor(props) {         super(props);          // Set initial state of parent         this.state = { category: "Coder" };          // Binding this keyword         this.updateState = this.updateState.bind(this);     }      updateState() {         // Changing state         this.setState({ category: "Geek" });     }      render() {         return (             <div>                 <Child category={this.state.category} />                 <button onClick={this.updateState}>                     Click me!                 </button>             </div>         );     } }  class Child extends Component {     render() {         return (             <div>                 <p>Hi {this.props.category}!</p>             </div>         );     } }  export default App;

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

re-render of child component by changing props

Method 2: Using the forceUpdate() method

The forceUpdate method forcible re-render the component. When forceUpdate is called it directly calls the render method by skiping other lifecycle methods and update the interface.

Caution: Even though forceUpdate solves our problem but it is advised to use setState or changing props to re-render a component as forceUpdate method skips the proper lifecycle of rendering of a component. See this for detail.

Example: This example implements re-render forcibly using the forceUpdate method.

JavaScript

// Filename - App.js  import React, { Component } from "react";  class App extends Component {     reRender = () => {         // force update         this.forceUpdate();     };      render() {         return (             <div>                 <h2>Random Number Generator</h2>                 <p>                     Your Number:{" "}                     {Math.floor(Math.random() * 10) + 1}                 </p>                 <button onClick={this.reRender}>                     Generate!                 </button>             </div>         );     } }  export default App;