react-hold-height/src/HoldHeight.js

React component to hold the highest height established by a child component even though it no longer exists in the browser window

import React, { useState, useEffect, useRef } from "react";
import PropTypes from "prop-types";
import _ from "lodash";

function HoldHeight({ initialHeight, resetOnWindowResize, children, style }) {
  const [height, setHeight] = useState(initialHeight || 0);
  const [windowWidth, setWindowWidth] = useState(0);
  const reset = resetOnWindowResize;

  const me = useRef(null);
  const resetHeight = _.debounce(() => {
    if (windowWidth !== window.innerWidth && reset === true) {
      setHeight(initialHeight || 0);
      setWindowWidth(window.innerWidth);
    }
  }, 300);

  useEffect(() => {
    window.addEventListener("resize", () => resetHeight());
    updateHeight();

    return () => {
      window.removeEventListener("resize", () => resetHeight());
    };
  }, []);

  useEffect(() => {
    updateHeight();
  }, [children]);

  function updateHeight() {
    const refHeight = me.current.clientHeight;

    if (refHeight > height) setHeight(refHeight);
  }

  return (
    <div ref={me} style={{ ...style, minHeight: height }}>
      {children}
    </div>
  );
}

HoldHeight.propTypes = {
  resetOnWindowResize: PropTypes.bool,
  initialHeight: PropTypes.number,
};

export default HoldHeight;