Как получить высоту элемента после componentDidUpdate?

Question

Я пытаюсь построить динамическую сетку высот, где у меня на фиксированной высоте (100vh) столько строк, сколько я могу, без переполнения. Каждая строка имеет переменную высоту, поэтому я не могу рассчитать количество строк, котороеподойдет заранее.

Вот код, над которым я работаю в качестве прототипа:

.rows-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100%;
    background-color: red;
 }

.rows-inner-container {
    display: flex;
    flex-direction: column;
    background-color: orange;
}


import React, { Component } from "react";
import PropTypes from "prop-types";

import "./styles.css";

const data = Array.apply(null, { length: 500 }).map((value, index) => {
  return {
    data: "Row #" + index
  };
});

class DynamicGrid extends Component {
  state = {
    viewRowsStartIndex: 0,
    viewRows: 1,
    viewAddRows: true
  };

  componentDidMount = () => {
    this.renderLines();
  };

  componentDidUpdate = () => {
    this.renderLines();
  };

  renderLines = () => {
    let { viewAddRows, viewRows } = this.state;

    let containerHeight = this.refs.container.offsetHeight;
    let innerContainerHeight = this.refs.innerContainer.offsetHeight;

    console.log("HEIGHTS:");
    console.log(
      "CONTAINER: " +
        containerHeight +
        " INNER CONTAINER: " +
        innerContainerHeight
    );
    console.log("STATE:");
    console.log(
      "viewRows: " + viewRows + " - viewAddRows: " + this.state.viewAddRows
    );

    if (viewAddRows === true && innerContainerHeight < containerHeight) {
      this.setState({
        viewRows: viewRows + 1
      });
    } else {
      this.setState({
        viewAddRows: false,
        viewRows: viewRows - 1
      });
    }
  };

  getRow = (row, index) => {
    let height = Math.floor(Math.random() * 50) + 10;
    return (
      <div key={index} style={{ height: height }}>
        {row.data}
      </div>
    );
  };

  getRows = rows => {
    let { viewRowsStartIndex, viewRows } = this.state;

    let ret = [];

    let rowIndex = 0;
    for (
      let index = viewRowsStartIndex;
      index < viewRowsStartIndex + viewRows;
      index++
    ) {
      console.log("Processing row " + index);

      let row = rows[index];
      ret.push(this.getRow(row, rowIndex++));
    }

    return ret;
  };

  render() {
    let rows = this.getRows(data);

    return (
      <div ref="container" className="rows-container">
        <div ref="innerContainer" className="rows-inner-container">
          {rows}
        </div>
      </div>
    );
  }
}

export default DynamicGrid;

В результате я получаю следующее:

HEIGHTS:
CONTAINER: 630 INNER CONTAINER: 17
STATE:
viewRows: 1 - viewAddRows: true
HEIGHTS:
CONTAINER: 630 INNER CONTAINER: 17
STATE:
viewRows: 2 - viewAddRows: true
HEIGHTS:
CONTAINER: 630 INNER CONTAINER: 17
STATE:
viewRows: 3 - viewAddRows: true
HEIGHTS:
CONTAINER: 630 INNER CONTAINER: 17
STATE:
viewRows: 4 - viewAddRows: true
...

Изlog Я вижу, что высота innerContainer не обновляется после componentDidUpdate, и я сделал это предположение для построения моего алгоритма.

Итак, как мне получить новую высоту innerContainer после обновления состояния, чтобы я мог заполнить свой container строками?

Если такое поведение невозможно, как я могу решить проблему с строками динамической высоты?