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;

Wacke

try in componentDidMount() – Shortage

@Shortage how would I check if the component's loaded property is true in componentDidMount()? Does componentDidMount() only get called when all components have rendered? – Wacke

yeah when a component mount..the componentDidMount() invokes. – Shortage

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

Zampardi

This is really not the solution nor the answer. – Leeanneleeboard

Answer 2

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>;
   }

Jeramey

Answer 3

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

Saintebeuve

Answer 4

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;

Dreher

sorry what does loaded={this.state.isLoaded} do? Does it set this.state.isLoaded to the value of loaded? – Wacke

Oh sorry i misread your code. I thought you want to pass the isLoaded to your model-viewer, but you are actually passing a callback. – Dreher

What is model-viewer? a component? web component? The parent component that you display here has nothing to do with the lifecycle of model-viewer, therefore you would have to share your code of model-viewer in order to understand the issue – Dreher

model-viewer is a web component modelviewer.dev – Wacke

I'm confused about how I could access the 'loaded' property of the component or if there's a better way of calling a function when the component has loaded – Wacke

Answer 5

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;

Dreher