Measure width of component without re-loading the page

Question

I am using this hook to measure the size of a div component (https://reactjs.org/docs/hooks-faq.html#how-can-i-measure-a-dom-node):

function useClientRect() {
  const [rect, setRect] = React.useState(null);
  const ref = React.useCallback(node => {
    if (node !== null) {
      setRect(node.getBoundingClientRect());
    }
  }, []);
  return [rect, ref];
}

This is my component, simplified. I'm using it along with React Map GL, as there is no way to set the width of the viewport in terms of %. I couldn't find other way to do it... getBoundsForPoints is a function to obtain the limits of the viewport of a map, given an array of coordinates and the width of the map in pixels.

function Mapas(props){  
    const [rect,ref] = useClientRect() 
    useEffect(()=>{
      const coordinates = [some coordinates]
      let new_viewport
      if (rect!==null){ //Here is when sometimes I get rect===null 
        new_viewport = getBoundsForPoints(coordinates, rect.width) 
      } else {
        new_viewport = getBoundsForPoints(coordinates, 500)
      }
      setViewport(new_viewport) 
    },[rect]) 

    return (
        <MDBContainer>
            <MDBRow>
              <MDBCol md='12' xl='8'>
                 <div ref={ref}> {/*Elemento referenciado */}
                  <ReactMapGL
                    {...viewport}
                    mapboxApiAccessToken='xxx'}
                    mapStyle='xxx'
                    onViewportChange={nextViewport => setViewport({...nextViewport})}
                    >
                  </ReactMapGL>
                </div>
              </MDBCol>
              <MDBCol xl='4' md='12'>
                 Other stuff
              </MDBCol>
            </MDBRow>       
      </MDBContainer>        
    )
}

export default Mapas

When the page is loaded it's working fine; however, when I get to the page from other component, without re-rendering, rect is null. How can I avoid this, thank you!

Show an example of how you are using it in your component. – pilchard Jul 27 '21 at 15:10 — pilchard, Jul 27 '21 at 15:10
Sorry, I wrote a simplified version of my component – chococroqueta Jul 27 '21 at 15:20 — chococroqueta, Jul 27 '21 at 15:20

score 0 · Answer 1 · answered Jul 27 '21 at 15:41

import ResizeObserver from 'resize-observer-polyfill';

const measureSize = el => {
    return {
      height: el && el.current && Math.round(el.current.getBoundingClientRect().height),
      width: el && el.current && Math.round(el.current.getBoundingClientRect().width),
    };
  };
  const [size, setSize] = useState(measureSize(ref));

  useEffect(() => {
    setSize(measureSize(ref));

    const observer = new ResizeObserver(() => {
      window.requestAnimationFrame(() => {
        setSize(measureSize(ref));
      });
    });
    observer.observe(ref.current);

    return () => {
      observer.disconnect();
    };
  }, [ref]);

i use a polyfill resize-observer-polyfill to have more robust solution

score 0 · Accepted Answer · answered Sep 08 '21 at 08:44

I finally had to use the hook useLayoutEffect, instead of useEffect. The hook (https://es.reactjs.org/docs/hooks-reference.html#uselayouteffect) is similar to useEffect but is run after all components are built, therefore the reference is now correctly defined and can measure the dimensions of the component. The final simplified code is the following:

function useClientRect() {
  const [rect, setRect] = React.useState(null);
  const ref = React.useCallback(node => {
    console.log('Node')
    console.log(node)
    if (node !== null) {
      setRect(node.getBoundingClientRect());
    }
  }, []);
  return [rect, ref];
}

function Mapas(props){  
    const [rect,ref] = useClientRect() 

    useLayoutEffect(()=>{
      const coordinates = [some coordinates]
      let new_viewport
      if (rect!==null){ //Here is when sometimes I get rect===null 
        new_viewport = getBoundsForPoints(coordinates, rect.width) 
      } else {
        new_viewport = getBoundsForPoints(coordinates, 500)
      }
      setViewport(new_viewport) 
    },[rect]) 

    return (
        <MDBContainer>
            <MDBRow>
              <MDBCol md='12' xl='8'>
                 <div ref={ref}> {/*Elemento referenciado */}
                  <ReactMapGL
                    {...viewport}
                    mapboxApiAccessToken='xxx'}
                    mapStyle='xxx'
                    onViewportChange={nextViewport => setViewport({...nextViewport})}
                    >
                  </ReactMapGL>
                </div>
              </MDBCol>
              <MDBCol xl='4' md='12'>
                 Other stuff
              </MDBCol>
            </MDBRow>       
      </MDBContainer>        
    )
}

export default Mapas

Measure width of component without re-loading the page

2 Answers2