Reactjs – React: how can I call a function when a component has loaded

loading, onload, onload-event, reactjs

I am trying to use Google's model-viewer web component 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()?

My code so far looks like this:

class App extends Component {  isLoaded() {    console.log("loaded!")  }  render() {    return (      <>        <model-viewer          src={require('..my model..')}           alt="A model"          loading="eager"          loaded={this.isLoaded}         />      </>    )  }}export default App;

Best Solution

The thing is model-viewer you used in this case IS NOT a React component. That mean it has neither react component behavior nor life cycle.

My solution is look for some other library as a wrapper like below: