React how to dynamically set div height to follow suit of full window height including scroll

I reproduced the scenario and I got to this. Hope it helps.

Why is it always growing?

In my case, document.body.scrollHeight is returning the height of the body with its margin (for some reason), so every time the component height is set it keeps being smaller than the body's scrollHeight and given that the body grows with its children, with the resize, the component just keeps growing.

For Example:

 componentDidMount : 
   bodyHeight = 90 + 10 (a margin)
   scrollHeight = 100
   componentHeight = 100

   newBodyHeight = 100 + 10 

 Resize:
   bodyHeight = 100 + 10 
   scrollHeight = 110
   componentHeight = 110

   newBodyHeight = 110 + 10 , and so on.

How to remedy it?

You could subtract the margin of the body from the scrollHeight or calculate the height from the component's children's height.

I just changed this:

updateDimensions() {
  const margin = 16; // In my case was marginTop: 8px and marginBottom: 8px
  const heightSet = document.body.scrollHeight - margin;
  this.setState({ heightSet });
}

import React, { useRef, useLayoutEffect, useState } from "react";

const Home = props => {
  const targetRef = useRef();
  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
  const [initVal, setInitVal] = useState(0);
  const [height, setHeight] = useState({});

  useLayoutEffect(() => {
    if (targetRef.current) {
      setDimensions({
        width: targetRef.current.offsetWidth,
        height: targetRef.current.offsetHeight
      });
      setHeight({
        height: targetRef.current.offsetHeight + "px",
        border: "1px solid red"
      })
    }

  }, []);

  const hanleInput = (e) => {
    setInitVal(e.target.value);
  }

  const increaseHeight = () => {
    let totalHeight = Number(dimensions.height) + Number(initVal);
    setDimensions({
      width: targetRef.current.offsetWidth,
      height: totalHeight
    });
    setHeight({
      height: totalHeight + "px",
      border: "1px solid red"
    })
    setInitVal(0);
  }

  return (
    <div ref={targetRef} style={height} >
      <p>{dimensions.width}</p>
      <p>{dimensions.height}</p>
      <input type="number" value={initVal} onChange={hanleInput} />
      <button onClick={increaseHeight}>increaseHeight</button>
    </div>
  );
};

export default Home;