Myujth

I need to access DOM elements outside of my React app, which may load slower than my app. Then I need to update my state to render a few different things. To do that I am polling for the DOM elements with a recursive function that gets kicked off from componentDidMount(). I'm seeing a weird issue where once the element is found and I've updated the state, things get out of sync. In the render function, my console.log() shows the updated state value, in React Developer Tools I see the updated state value, but on the actual rendered page I see still see the old state value.

Code:

// initially doesn't exist. Added to the DOM after 3 seconds
let slowElement = document.querySelector('.external-dom-element')

class App extends React.Component 
 constructor (props) 
 super(props)

 this.state = 
 showFoundSlowElementMessage: false,
 slowElementCheckMaxAttempts: 5,
 slowElementCheckCount: 0,
 

 this.checkForSlowElement = this.checkForSlowElement.bind(this)
 

 componentDidMount () 
 this.checkForSlowElement()
 

 checkForSlowElement () 
 slowElement = document.querySelector('.external-dom-element')

 if (slowElement !== null) 
 console.log('found') // element found, show message

 this.setState(
 showFoundSlowElementMessage: true
 )
 else 
 console.log('not found') // element not found, increment count and check again after delay

 this.setState(
 slowElementCheckCount: this.state.slowElementCheckCount + 1
 , () => 
 if (this.state.slowElementCheckCount < this.state.slowElementCheckMaxAttempts) 
 window.setTimeout(this.checkForSlowElement, 1000)
 
 )
 
 

 render() 
 const foundSlowElement = this.state.showFoundSlowElementMessage
 ? <p>Found slow element</p>
 : <p>No sign of slow element, checked this.state.slowElementCheckCount times</p>

 // null until it is added to the page
 console.log(foundSlowElement)

 return (
 <div>
 <h1>Hello</h1>
 foundSlowElement
 </div>
 );
 
 
}

ReactDOM.render(<App />, document.getElementById('react-target'));

// Simulate slow element by adding it to the DOM after 3 seconds
window.setTimeout(() => 
 const root = document.getElementById('root');
 const newElement = '<div class="external-dom-element">slow element</div>';
 root.innerHTML += newElement;
, 3000)

Working example on codepen

I figured this out myself. It has nothing to do with my component, it's the demo itself that is breaking it. When I simulate the slow element by appending the root element's inner html:

 root.innerHTML += newElement;

It re-parses the the entire element and React loses all of the event handlers, etc. that it had previously set up.

This thread helped me out