title: React: how can I call a function when a component has loaded?
body: <p>I am trying to use Google's <a href="https://modelviewer.dev/" rel="noreferrer">model-viewer web component</a> to display a model on my website. The documentation says the component has a 'loaded' property which is 'read only' and 'returns true if the load event has fired since the last src change'. I'm trying to use this property to call a function when the component has loaded but I don't think I'm accessing it correctly. Should I be using componentDidUpdate to check if this property has changed? Or is there a way of using onload()?</p>
  <p>My code so far looks like this:</p>
  <pre><code>class App extends Component {
  
    isLoaded() {
      console.log(&quot;loaded!&quot;)
    }
  
    render() {
      return (
        &lt;&gt;
          &lt;model-viewer
            src={require('..my model..')} 
            alt=&quot;A model&quot;
            loading=&quot;eager&quot;
            loaded={this.isLoaded}
           /&gt;
        &lt;/&gt;
      )
    }
  }
  
  export default App;
  </code></pre>