How to track in React js when the component is fully loaded with pictures, video, 3D reviews, descriptions, etc. ..?

ComponentDidMount is not suitable. While downloading photos and heavier content, everything jumps as it loads.

    1 answer 1

    componentDidMount() - the method is called once after the component is rendered. This method should be suitable if you did not use rendering with the help of auxiliary functions inside the render() method and did not use the arrow functions inside it. A couple of useful notes (source is indicated at the end of the answer):

    Note # 1: Using Function.prototype.bind in the render creates a new function each time a component displays, which may have performance implications.

    Note # 2: The use of the arrow function in the render creates a new function each time the component displays, which may have performance implications.

    In enSO, there is an answer to a similar question. React “after render” code? - here componentDidMount() is used just. However, there is another approach: Use requestAnimationFrame to ensure that your code is run after render - here you are offered to use window.requestAnimationFrame . However, this is not all, you can come up with a kind of hack in the form of a timer and install delayed launch via window.setTimeout

    However, I strongly recommend that you revise the rendering method, refactor the code, enter variables into the component state as a loading parameter as necessary. For example, in the constructor we put loading: true then inside componentDidMount() we load something and call the anonymous method on the callback of the end of loading, inside which we change the state and set loading: false , which will cause the component to be re-used. And inside the render we add a simple condition with a check for the value from loading . Code example:

     constructor(props) { super(props); this.state = { data: null, loading: true, // для отображения загрузки }; } componentDidMount() { // загрузка какого-то контента loadingData .then((result) => { this.setState({ data: result, loading: false }); // загрузка завершена, данные есть }) .catch((error) => { this.setState({ data: {}, loading: false }); // загрузка завершена, данных нет console.error(error); }); } render() { if (this.state.loading) { return (<p>Loading...</p>); // отображение загрузки } return (<MyComponent data={this.state.data}>); // отображение результата }

    This is in case the problem is in loading data and displaying it after rendering. However, if you split the rendering into several parts, you need to define specific rendering locations and add callbacks to specific parts of the code. Since your question does not include a sufficient amount of code, my answer will be a bit general.

    You can also add one listener to the "DOMContentLoaded" event inside componentDidMount() . It's simple:

     componentDidMount() { document.addEventListener("DOMContentLoaded", (event) => { alert('Я загрузился полностью!'); }); }

    Well, of course, it is better to revise your rendering method.

    A couple of useful links: