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

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: 

• NPM & Node.js
• React JS
• ReactJS props
• ReactJS forceUpdate() method

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

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. 

// 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:

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. 

// 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;

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: