How to rerender component without state change| React forceUpdate method

In react application, State holds the data to the component, and props pass data to component.

What happens if the state/props of a component changes?

usually, the state changes its values using the setState method with a new state object.

whenever the state changes, React framework does the following sequence of steps

• calls shouldComponentUpdate method
• if shouldComponentUpdate contains conditional logic which returns false, that means the render method is not called. if it returns true, the render method is called
• finally, reload the components

It is an example of re-render the component on button click as button click update the state.

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { counter: 0 };

  }
  onClick = () => {
    //this.forceUpdate();
    this.setState({ counter: 1 })

  };

  render() {
    console.log('Render called');

    return (
      <div> {this.state.counter}

        <button onClick={this.onClick}>Click</button>

      </div>
    )
  }
}

export default App;

How can retender a component without the state being changed?

It means, programmatically setState change is not called for re-render a component,

forceUpdate approach is being used in a component, Even though this approach is avoided as react architecture principal

what happens if forceUpdate is called in React component.

• shouldComponentUpdate method be ignored
• It calls re-render the component whether shouldComponentUpdate return true/false

import './App.css';
import { Component } from 'react';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { counter: 0 };

  }
  onClick = () => {
    this.forceUpdate();

  };

  render() {
    console.log('Render called');

    return (
      <div> {this.state.counter}

        <button onClick={this.onClick}>Click</button>

      </div>
    )
  }
}

export default App;

Above, is an example of forceUpdate in react components.

How to achieve the same thing with react hooks

Similarly, We can force a component to re-render with react hooks also.