accounts-frontend/packages/app/components/MeasureHeight.tsx

import React from 'react';
import { omit, debounce } from 'app/functions';

/**
 * MeasureHeight is a component that allows you to measure the height of elements wrapped.
 *
 * Each time the height changed, the `onMeasure` prop will be called.
 * On each component update the `shouldMeasure` prop is being called and depending of
 * the value returned will be decided whether to call `onMeasure`.
 * By default `shouldMeasure` will compare the old and new values of the `state` prop.
 * Both `shouldMeasure` and `state` can be used to reduce the amount of measures, which
 * will reduce the count of forced reflows in browser.
 *
 * Usage:
 * <MeasureHeight
 *     state={theValueToInvalidateCurrentMeasure}
 *     onMeasure={this.onUpdateContextHeight}
 * >
 *     <div>some content here</div>
 *     <div>which may be multiple children</div>
 * </MeasureHeight>
 */

type ChildState = any;

// TODO: this may be rewritten in more efficient way using resize/mutation observer

export default class MeasureHeight extends React.PureComponent<
  {
    shouldMeasure: (prevState: ChildState, newState: ChildState) => boolean;
    onMeasure: (height: number) => void;
    state: ChildState;
  } & React.HTMLAttributes<HTMLDivElement>
> {
  static defaultProps = {
    shouldMeasure: (prevState: ChildState, newState: ChildState) =>
      prevState !== newState,
    onMeasure: () => {},
  };

  el: HTMLDivElement | null = null;

  componentDidMount() {
    // we want to measure height immediately on first mount to avoid ui laggs
    this.measure();
    window.addEventListener('resize', this.enqueueMeasurement);
  }

  componentDidUpdate(prevProps: typeof MeasureHeight.prototype.props) {
    if (this.props.shouldMeasure(prevProps.state, this.props.state)) {
      this.enqueueMeasurement();
    }
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.enqueueMeasurement);
  }

  render() {
    const props = omit(this.props, ['shouldMeasure', 'onMeasure', 'state']);

    return <div {...props} ref={(el: HTMLDivElement) => (this.el = el)} />;
  }

  measure = () => {
    requestAnimationFrame(() => {
      this.el && this.props.onMeasure(this.el.offsetHeight);
    });
  };

  enqueueMeasurement = debounce(this.measure);
}