elementRef.current?.clientHeight gives of incorect highet of the element

Issue

I have a simple code to grab the height of the element. The element itself is 1465 px but it is being reported as 870, and I honestly have no clue why I assume it has to do something with padding not being rendered when the measurements are taking place but the hight, in this case, would be only 820px so I'm not really sure.

Here is small part of my code the full thing is linked

  const elementRef = useRef(null)
  const [windowSize, setWindowSize] = useState(getWindowSize())
  const [elementHeight, setElementHeight] = useState(null)

  function getWindowSize() {
    const { innerWidth, innerHeight } = window
    return { innerWidth, innerHeight }
  }

  useEffect(() => {
    //Handles on load of the page
    setElementHeight(elementRef.current?.clientHeight)
    console.log(elementRef.current?.clientHeight)
    //Handles resizing of the window
    function handleWindowResize() {
      setWindowSize(getWindowSize())
    }
    window.addEventListener('resize', handleWindowResize)
  }, [])

  return (
    <>
      <section
        className={props.bgColor + ' ' + props.textColor}
        //style={{ height: elementHeight + 'px' }}
        ref={elementRef}
      >
        <article>{props.children}</article>
        <div />
      </section>
    </>
  )

Component (The code and the problem is here). https://github.com/laycookie/Art_Portfolio-CS50_Final_Project/blob/main/Art_portfolio_ts/web/src/components/Section.tsx

The page that Im working on. https://github.com/laycookie/Art_Portfolio-CS50_Final_Project/blob/main/Art_portfolio_ts/web/src/pages/IndexPage/IndexPage.tsx

Update: I changed the from setting ElementHeight in useEffect to changing it in a function that is triggered by onLoad={} now element height is being reported correctly but 2 of the instance of this component don't trigger the function here is the new code.

export default function Section(props: MessageProps) {
  const elementRef = useRef(null)
  const [windowSize, setWindowSize] = useState(getWindowSize())
  const [elementHeight, setElementHeight] = useState(null)

  function getWindowSize() {
    const { innerWidth, innerHeight } = window
    return { innerWidth, innerHeight }
  }

  function setElementHightOnLoad() {
    setElementHeight(elementRef.current?.clientHeight)
    console.log(elementRef.current?.clientHeight)
    console.log('test')
  }
  useEffect(() => {
    //Handles resizing of the window
    function handleWindowResize() {
      setWindowSize(getWindowSize())
    }
    window.addEventListener('resize', handleWindowResize)
  }, [])

  //===Set hight of the section to 100% of the viewport===
  useEffect(() => {
    if (windowSize > elementHeight) {
      console.log('resize')
    } else {
      console.log('not resize')
    }
  }, [windowSize])
  //=====================================================
  return (
    <section
      className={props.bgColor + ' ' + props.textColor}
      onLoad={setElementHightOnLoad}
      //style={{ height: elementHeight + 'px' }}
      ref={elementRef}
    >
      <article>{props.children}</article>
      <div />
    </section>
  )
}

Solution

For any one who has this problem, good luck my solution was this.

    function findImgInChildren(element) {
      for (const i in element) {
        //check if img
        if (element[i].type == 'img') {
          return true
        }

        let newChiled
        if (element[i].props?.children == undefined) {
          return false
        } else {
          newChiled = element[i].props.children
        }
        if (!Array.isArray(newChiled)) {
          newChiled = [newChiled]
        }

        if (findImgInChildren(newChiled)) {
          return true
        }
      }
      return false
    }

It turns out if you don't have a img onLoad function will never be triggered. So you have to write a recursion function to check if there is an img chilled in the component. I can only hope this recursion function will solve your problem because it was painful to figure out.

Answered By - LAYTOR