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

Question

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;

Answer 1

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:

• https://www.npmjs.com/package/react-3d-model-viewer
• https://www.npmjs.com/package/react-model-viewer

Answer 2

From the React docs:

componentDidMount() is invoked immediately after a component is mounted (inserted into the tree). Initialization that requires DOM nodes should go here. If you need to load data from a remote endpoint, this is a good place to instantiate the network request.

The docs for React lifecycle are here

Answer 3

I believe you are looking for this:

class App extends Component {
  state = {
    isLoaded: false
  }
  // use comonentDidMount lifecycle method
  componentDidMount() {
    this.setState({ isLoaded: true });
    console.log("loaded!");
  }

  render() {
    return (
      <>
        <model-viewer
          src={require('..my model..')} 
          alt="A model"
          loading="eager"
          loaded={this.state.isLoaded} // use this.state.isLoaded, not this.isLoaded
         />
      </>
    )
  }
}

export default App;

Answer 4

Try this: In the documentation of "react-model-viewer" you can see under events, there is a load event that is triggered when the viewer is done loading. That should do it hopefully :)

 class App extends Component {

  isLoaded() {
    console.log("Loaded");
  }

  render() {
    return (
      <>
        <model-viewer
          src={require('..my model..')} 
          alt="A model"
          loading="eager"
          load={this.isLoaded}
         />
      </>
    )
  }
}

export default App;

Answer 5

There are two solution for this depends on what kind of react logic you follow

1. Class based usually using keyword class Welcome extends React.Component
2. Using function based component and Hooks

1. Class based on load For this solution you can use componentDidMount function

 class Welcome extends React.Component {
  componentDidMount() {
    // call api or anything
    console.log("Component has been rendered");
  }
  render() {
    return <h1>Hello, World</h1>;
   }
 }
  
}

2. Using function based component and Hooks The Effect Hook, useEffect, adds the ability to perform side effects from a function component. It serves the same purpose as componentDidMount, componentDidUpdate, and componentWillUnmount in React classes Ref

   import React, { useState, useEffect } from 'react';

   export default function Welcome() {
     useEffect(() => {
        // call api or anything
        console.log("loaded");
     });
     return <h1>Hello, World</h1>;
   }