reload component - React

user_5136659 0
Viewed 23245

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}/>)
    }

}
react-native reactjs
3 Answers

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.

user_8155070

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.

user_25654560

Each time a component is created and destroyed, place this in the global variable componentArray so that all life cycle methods under this can be called externally.

class Test extends Component {
  constructor(props){
    super(props)
    // add 
    window.componentArray = window.componentArray || []
    this.index = new Date().getTime()
    window.componentArray.push(this)
  }
  componentDidMount(){
    console.log('componentDidMount')
  }
  componentWillUnmount(){
    // remove
    window.componentArray = window.componentArray || []
    window.componentArray = window.componentArray.reduce((pre,obj)=>{
      if(this.index != obj.index){
        pre.push(obj)
      }
      return pre
    },[])
  }
  reComponentDidMount(){
    this.componentDidMount()
  }
  render(){
    return <div>test</div>
  }
}


// outside like this run
componentArray.forEach(o=>{
   o.componentDidMount()
})
user_96139150
Related