Reactjs. Counter of renders

Question

How to make counter of renders the child component in parent?

I have 2 components Widget (parent) and Message(child). I passed counter from child to parent and trying to set getting value from child set to state. And I getting err: Maximum update depth exceeded.

There is child component Message:

    import React, { Component } from "react";

export default class Message extends React.Component {
  constructor(props) {
    super(props);
    this.changeColor = this.changeColor.bind(this);
    this.changeCount = this.changeCount.bind(this);

    this.state = { h: 0, counter: 0 };
  }

  changeColor = () => {
    this.setState(state => ({
      h: Math.random()
    }));
  };

  changeCount = () => {
    this.setState(state => ({
      counter: ++state.counter
    }));
  };

  componentDidUpdate(prevProps) {
    this.props.getColor(this.color);
    this.changeCount();
    this.props.getCount(this.state.counter);
  }

  render() {
    const { children } = this.props;
    const { s, l, a } = this.props.color;

    this.color = `hsla(${this.state.h}, ${s}%, ${l}%, ${a})`;

    return (
      <p
        className="Message"
        onClick={this.changeColor}
        style={{ color: this.color }}
      >
        {children}
      </p>
    );
  }
}

There is parent component:

import React, { Component } from "react";
import Message from "./Message/Message";

export default class Widget extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      color: {
        s: 30,
        l: 60,
        a: 1
      },
      counter: 0
    };
  }

  getCount = count => this.setState(state => ({
    counter: state.counter
  }));

  getColor = color => {
    console.log(`the color is ${color}`);
  };

  render() {
    const counter = this.state.counter;

    return (
      <div>
        <Message
          getColor={this.getColor}
          getCount={this.getCount}
          color={this.state.color}
        >
          {undefined || `Hello World!`}
        </Message>
        {counter}
      </div>
    );
  }
}

What I do wrong?

Answer 1

The answer by @Yossi counts total renders of all component instances. This solution counts how many renderes and re-renders an individual component has done.

For counting component instance renders

import { useRef } from "react";


export const Counter = props => {
    const renderCounter  = useRef(0);
    renderCounter.current = renderCounter.current + 1;
    return <h1>Renders: {renderCounter.current}, {props.message}</h1>;
};

Answer 2

export default class Message extends React.Component {
    constructor() {
        this.counter = 0;
    }

    render() {
        this.counter++;
        ........
    }
}