Buggy Case

scenario1.js

import React from "react";
import { render } from "react-dom";
import Hello from "./Hello";

const styles = {
  fontFamily: "sans-serif",
  textAlign: "center"
};

class ChildComponent extends React.Component {
  componentDidMount() {
    this.props.getHeight(this.node.offsetHeight);
  }
  render() {
    return (
      <div ref={node => (this.node = node)}>
        <h2>I am interested in the height of this component</h2>
        <p>This is just a dummy data to get the height of this component.</p>
      </div>
    );
  }
}

class ParentComponent extends React.Component {
  nodes = [];
  state = {
    heights: []
  };
  getHeight = height => {
    let h = [...this.state.heights, height];
    this.setState({ heights: h });
  };

  render() {
    return (
      <React.Fragment>
        {[1, 2, 3, 4].map((item, index) => (
          <ChildComponent key={index} getHeight={this.getHeight} />
        ))}
        <p>The heights with the bug are {this.state.heights.join(" ")}</p>
      </React.Fragment>
    );
  }
}
const App = () => (
  <div style={styles}>
    <Hello name="CodeSandbox" />
    <ParentComponent />
  </div>
);

render(<App />, document.getElementById("root"));

scenario2.js

import React from "react";
import { render } from "react-dom";
import Hello from "./Hello";

const styles = {
  fontFamily: "sans-serif",
  textAlign: "center"
};

class ChildComponent extends React.Component {
  render() {
    return (
      <div ref={node => (this.node = node)}>
        <h2>I am interested in the height of this component</h2>
        <p>This is just a dummy data to get the height of this component.</p>
      </div>
    );
  }
}

class ParentComponent extends React.Component {
  nodes = [];
  state = {
    nodeHeights: []
  };
  componentDidMount() {
    let heights = this.nodes.map(x => x.node.offsetHeight);
    this.setState({ nodeHeights: heights });
  }
  render() {
    return (
      <React.Fragment>
        {[1, 2, 3, 4].map((item, index) => (
          <ChildComponent
            ref={node => this.nodes.push(node)}
            key={index}
          />
        ))}
        <p>
          The heights without the bug are {this.state.nodeHeights.join(" ")}
        </p>
      </React.Fragment>
    );
  }
}
const App = () => (
  <div style={styles}>
    <Hello name="CodeSandbox" />
    <ParentComponent />
  </div>
);

render(<App />, document.getElementById("root"));