title: React TypeError: Cannot read property 'getBoundingClientRect' of undefined
body: <p><strong>server</strong> : Node.js, MongoDB, Graphql<br />
  <strong>front-end</strong>: React --typescript, apollo-client, Graphql</p>
  <p><strong>I think it's a matter of timing or order to bring data and render it. Nevertheless, I cannot find a solution to this problem.</strong></p>
  <h1>Error</h1>
  <hr />
  <ol>
  <li>Uncaught TypeError: Cannot read property 'getBoundingClientRect' of undefined.</li>
  <li>Uncaught (in promise) TypeError: Cannot read property 'getBoundingClientRect' of undefined.</li>
  </ol>
  <h1>Code</h1>
  <hr />
  <pre><code>import React, { MutableRefObject, useCallback, useLayoutEffect, useRef, useState } from 'react';
  import { gql, useQuery } from '@apollo/client';
  import { MainSlide } from '../../components';
  import { MSlidersItf, MSlideItf } from '../../types';
  import * as S from './MainSliderStyle';
  import { GetWindowWidth } from '../../api/window-width/WindowWidth';
  
  const GET_MAINSLIDERS = gql`
    query {
      getMainSliders {
        idx
        title {
          en
          ko
        }
        text {
          en
          ko
        }
        url
        src
        postingDate
      }
    }
  `;
  
  const SlideMapForm = (item: MSlideItf, i: number, Count: number) =&gt; {
    return (
      &lt;MainSlide
        key={String(i + Count)}
        title={item.title}
        text={item.text}
        url={item.url}
        src={item.src}
        postingDate={item.postingDate}
      /&gt;
    );
  };
  export default function TestBtn() {
    const { loading, error, data } = useQuery&lt;MSlidersItf&gt;(GET_MAINSLIDERS);
    const MSlidersLength = data &amp;&amp; data?.getMainSliders.length;
    const TotalSlideCount = MSlidersLength! + 4;
  
    // Ref
    const slidersRef = useRef() as MutableRefObject&lt;HTMLDivElement&gt;;
  
    // getSize
    const windowWidth: number = GetWindowWidth(); // Browser window width
    const [elWidth, setElWidth] = useState(0);
  ERROR----------------------------------------------------------------------------------------
    const getEleWidth = useCallback(() =&gt; {
      if (data) {
        const { width } = slidersRef.current.children[2].getBoundingClientRect();
        setElWidth(width + 16); // Add Slide Margin
      }
    }, [data]);
  ERROR----------------------------------------------------------------------------------------
    const sliderMargin: number = (windowWidth - elWidth) / 2;
  
    // Slide to Center
    const [center, setCenter] = useState(2);
    const sliderPosition: number = elWidth * center - sliderMargin; // Slide Position Inital Value
  
    // sliderControll
    const prevButton = () =&gt; setCenter(center - 1);
    const nextButton = () =&gt; setCenter(center + 1);
  
    useLayoutEffect(() =&gt; {
  ERROR----------------------------------------------------------------------------------------
      getEleWidth();
  ERROR----------------------------------------------------------------------------------------
      const resizeLitener = () =&gt; {
        const timing = setTimeout(() =&gt; getEleWidth(), 150);
        clearTimeout(timing);
      };
  
      window.addEventListener('resize', resizeLitener);
      window.addEventListener('load', resizeLitener);
  
      return () =&gt; {
        window.removeEventListener('resize', resizeLitener);
        window.removeEventListener('load', resizeLitener);
      };
    }, [TotalSlideCount, center, data, elWidth, getEleWidth, sliderPosition]);
  
    if (loading) return &lt;h1&gt;Loding...&lt;/h1&gt;;
    if (error) return console.log(`MainSliders DB Error ${error}`);
    return (
      &lt;S.Wrap&gt;
        {data &amp;&amp; (
          &lt;S.SlidersArea ref={slidersRef} position={sliderPosition}&gt;
            {Object.values(data.getMainSliders)
              .slice(-2)
              .map((item, i) =&gt; SlideMapForm(item, i, -MSlidersLength!))}
            {Object.values(data.getMainSliders).map((item, i) =&gt; SlideMapForm(item, i, 0))}
            {Object.values(data.getMainSliders)
              .slice(-2)
              .map((item, i) =&gt; SlideMapForm(item, i, MSlidersLength!))}
          &lt;/S.SlidersArea&gt;
        )}
        &lt;S.Arrows onClick={prevButton}&gt;
          &lt;S.Prev&gt;
            &lt;img src=&quot;/img/icon/arrow-next.svg&quot; alt=&quot;Previous&quot; /&gt;
          &lt;/S.Prev&gt;
          &lt;S.Next onClick={nextButton}&gt;
            &lt;img src=&quot;/img/icon/arrow-next.svg&quot; alt=&quot;Next&quot; /&gt;
          &lt;/S.Next&gt;
        &lt;/S.Arrows&gt;
      &lt;/S.Wrap&gt;
    );
  }
  
  </code></pre>