Revision history [back]

One alternative method to capture component rendering in React JS without using Profiler API is to add console logs to the relevant lifecycle methods of the components.

For example, you can add console logs to the render() method of a component to see when the component is being rendered, and what props and state it's receiving:

class MyComponent extends React.Component {
  render() {
    console.log('MyComponent rendering');
    console.log('Props:', this.props);
    console.log('State:', this.state);
    // Return the component's elements here
  }
}

You can also add console logs to other lifecycle methods like componentDidMount() and componentDidUpdate() to see when the component has finished mounting or updating:

class MyComponent extends React.Component {
  componentDidMount() {
    console.log('MyComponent mounted');
  }

  componentDidUpdate(prevProps, prevState) {
    console.log('MyComponent updated');
    console.log('Previous props:', prevProps);
    console.log('Previous state:', prevState);
    console.log('Current props:', this.props);
    console.log('Current state:', this.state);
  }

  render() {
    // Return the component's elements here
  }
}

By adding console logs to the relevant lifecycle methods, you can get a good idea of how often and when your components are rendering, and what props and state they're using.