reload component - React

Question

how to make component to reload , what I mean not re-render the component but I want to make componentDidMount to be called again (re-start life cycle of component)

class Test extends Component 
{

    componentDidMount()
    {
        console.log('component did mount');
    }

    reload = () => 
    {
        //RELOAD COMPONENT
    };

    render()
    {
        return (<Button onPress={this.reload}/>)
    }

}

Answer 1

You can call the life-cycle methods explicitly

reload = () => 
{
    //RELOAD COMPONENT
    this.componentDidMount();
};

If you want to re-start the life-cycle, you have to remove it from the DOM and re-add it.

Answer 2

What you want can be done. But it is not the best practice. Basically, you need to toggle the availability of your component from the parent component. As shown below, parent component has a state property to tract the availability of the child component.

class Parent extends Component {

  constructor(props) {
    super(props);
    this.state ={
      showChild : true
    }
  }

  componentDidMount() {
      console.log('Parent Mounted');
  }

  reloadChild = () => {
      this.setState({
        showChild : false
      })
    
      setTimeout(() => {
        this.setState({
          showChild : true
        })
      },100);

      console.log("Reload Child Invoked")
  }

  render() {
    return ( 
      <div >
        {this.state.showChild?
          <Child reloadChild={this.reloadChild}/> : null
        }
      </div>
    );
  }

}

The Child component would look as below

class Child extends Component {

  constructor(props) {
    super(props);
  }

  componentDidMount(){
    console.log('Child component Mounted');
  }

  componentWillUnmount(){
    console.log('Child Component Unmounted');
  }

  onButtonClick = () => {
    console.log("Button Clicked")
    this.props.reloadChild();
  }

  render() {
    return ( 
      <button onClick={this.onButtonClick}>
        Click Me
      </button>
    );
  }

}

When you click on the button of the child component, it will call the method in parent Component which toggle the availability of the child component. Note that I've used setInterval in the reloadChild() method to toggle the availability. As I've said earlier, this is not the best practice. Just a workaround.