Bug: componentDidMountCalled before ref is set

[CodeMedic42]

I have encountered an issue where a class componentDidMount method is called before a ref is set in another. Also I am seeing sometimes it is being called twice, but not always. The ref is set in a class called Ex1 and the componentDidMount in a class called Ex2. There is also a forwardRef function component in the mix.

React version: 18.2.0

Steps To Reproduce

1. Run "npx create-react-app my-app"
2. Copy the code I have provided into app.js
3. Run 'npm start'
4. Open the dev tools and reload the page and follow the debugger points.

Here is a fiddle with the issue. Please note that I was having issues with jsFiffle.net not fully loading. I don't think it was my fiddle, but it was acting weird. If that happens just create your own fiddle from scratch and it should work.
https://jsfiddle.net/CodeMedic42/d50mnjz8/4/

Here is a copy of my code

import React, { useRef, Component, forwardRef } from 'react';

class Ex1 extends Component {
	render() {
		const {
			innerRef,
			children,
		} = this.props;

		return (
			<div
				ref={(element) => {
					console.log('This line is called after the componentDidMount in Ex2.');
					innerRef.current = element;
					debugger;
				}}
				className="ex1"
			>
				{children}
			</div>
		);
	}
}

class Ex2 extends Component {
	componentDidMount() {
		const { targetRef } = this.props;

		console.log('This line is hit before targetRef is set.');
        console.log('Also it appears to be called twice. Once before the ref is set and once after.');

		debugger;
	}
	
	render() {
		const {
			innerRef,
		} = this.props;

		return <div className="ex2">I do my own thing</div>;
	}
}

const Bar1 = forwardRef((props, ref) => {
	const {
		children,
	} = props;

	return (
		<Ex1 innerRef={ref}>
			{children}
		</Ex1>
	);
});

function Test() {
	const targetRef = useRef();

	return (
		<Bar1 ref={targetRef}>
			<Ex2 targetRef={targetRef}/>
		</Bar1>
	);
}

export default Test;

The current behavior

The componentDidMount method in Ex2 is called before, and sometimes after, the call to the ref function in Ex1.

The expected behavior

The componentDidMount method in Ex2 should be called once and after the ref is set in Ex1.

[erikasby]

Added a couple of more debuggers.

Result:
Test > Bar1 > Ex1.render() > Ex2.render() > Ex2.componentDidMount() > Ex1 > Ex2.componentDidMount()

Further investigation is needed and maybe someone can explain if this is intentional behavior.

Click for code w/ added debuggers

import React, { useRef, Component, forwardRef } from "react";

class Ex1 extends Component {
  render() {
    const { innerRef, children } = this.props;

    debugger;
    return (
      <div
        ref={(element) => {
          console.log(
            "This line is called after the componentDidMount in Ex2."
          );
          innerRef.current = element;
          debugger;
        }}
        className="ex1"
      >
        {children}
      </div>
    );
  }
}

class Ex2 extends Component {
  componentDidMount() {
    const { targetRef } = this.props;

    console.log("This line is hit before targetRef is set.");
    console.log(
      "Also it appears to be called twice. Once before the ref is set and once after."
    );

    debugger;
  }

  render() {
    const { innerRef } = this.props;

    debugger;
    return <div className="ex2">I do my own thing</div>;
  }
}

const Bar1 = forwardRef((props, ref) => {
  const { children } = props;

  debugger;
  return <Ex1 innerRef={ref}>{children}</Ex1>;
});

function Test() {
  const targetRef = useRef();

  debugger;
  return (
    <Bar1 ref={targetRef}>
      <Ex2 targetRef={targetRef} />
    </Bar1>
  );
}

export default Test;

[Rishab49]

1. I think this is the expected behavior as react renders children before the parent element, hence componentDidMount of Ex2 is called before the ref can be set on the parent i.e; div of Ex1
2. componentDidMount is called twice because your app must be running in strict mode.

[erikasby]

1. I think this is the expected behavior as react renders children before the parent element, hence componentDidMount of Ex2 is called before the ref can be set on the parent i.e; div of Ex1
2. componentDidMount is called twice because your app must be running in strict mode.

I have somewhat similar conclusion to this. I guess this issue could be closed then @CodeMedic42?