Any event triggered after React component mounted in DOM?

Question

If I try to do document.querySelector for an element inside the React component inside componentDidMount, it seems like it does not guarantee it (componentDidMount) gets called after its on the DOM. The result is it cannot find the element

Is there an event I should used instead if I want to access the DOM? After its attached to the DOM?

As a workaround, I used setTimeout is there a better way?

You might wanna have a look at this https://stackoverflow.com/questions/38093760/how-to-access-a-dom-element-in-react-what-is-the-equilvalent-of-document-getele/38093981#38093981 — Shubham Khatri, Oct 24 '17 at 10:23

score 1 · Answer 1 · answered Oct 24 '17 at 10:14

Another approach is that in your componentDidMount method set some state change. it makes an update on your component and call render method again with absolute mounted status.

like this:

componentDidMount(){
  this.setState({
    isMounted: true
  })
}

componentWillUpdate(nextProps, nextState){
  if(nextState.isMounted){
     // do something for your query selecting
  }
}

componentWillUnmount(){
  // do something else if you want
}

Any event triggered after React component mounted in DOM?

1 Answers1