Maximum update depth exceeded with useLayoutEffect, useRef

Question

I have the following component:

// component.js
import React from 'react';
import useComponentSize from 'useComponentSize';

const component = () => {
  const [comSize, comRef] = useComponentSize();

  return (
    
      hi
    
  );
};

which is using useComponentSize, a hook I've made:

// useComponentSize.js
import {
  useRef,
  useState,
  useLayoutEffect,
} from 'react';

const useComponentSize = () => {
  const [size, setSize] = useState({
    width: 0,
    height: 0,
  });
  const resizeRef = useRef();

  useLayoutEffect(() => {
    setSize(() => ({ 
      width: resizeRef.current.clientWidth,
      height: resizeRef.current.clientHeight,
    }));
  });
  
  return [size, resizeRef];
};

export default useComponentSize;

but for a reason I cannot work out, it always exceeds the maximum update depth. I've tried having useLayoutEffect depend upon resizeRef, which I thought would work, but then it doesn't update again (which upon reflection is exactly how I should have expected a ref to work).

What should I do to make this work properly, and most importantly why does the above cause an infinite loop?

Edit: second attempt using event listeners, still failing. What concept am I missing here?

// component.js
import React, { useRef } from 'react';
import useComponentSize from 'useComponentSize';

const component = () => {
  const ref = useRef();
  const [comSize] = useComponentSize(ref);

  return (
    
      hi
    
  );
};

import {
  useRef,
  useState,
  useLayoutEffect,
} from 'react';

const useComponentSize = (ref) => {
  const [size, setSize] = useState();

  useLayoutEffect(() => {
    const updateSize = () => {
      setSize(ref.current.clientWidth);
    }
    
    ref.current.addEventListener('resize', updateSize);
    updateSize();
    
    return () => window.removeEventListener('resize', updateSize);
  }, []);
  
  return [size];
};

export default useComponentSize;

That edit above is based upon this useWindowSize hook, which works great (I'm using it currently as a replacement, although I'd rather still get the above to work, and especially to know why it doesn't work).

A small explanation of what I'm trying to achieve as it wasn't made explicitly clear before: I want the state size to update whenever the size of the referenced component's size changes. That is, if the window resizes, and the component remains the same size, it should not update. But if the component size does change, then the size state should change value to reflect that.

user_6094348 · Answer

Your code gets stuck in an infinite loop because you haven't passed the dependency array to useEffectLayout hook.

You actually don't need to use useEffectLayout hook at all. You can observe the changes to the DOM element using ResizeObserver API.

P.S: Although OP's problem has already been solved through a demo posted in one of the comments under the question, i am posting an answer for anyone who might look at this question in the future.

Example:

const useComponentSize = (comRef) => {
  const [size, setSize] = React.useState({
    width: 0,
    height: 0
  });

  React.useEffect(() => {
    const sizeObserver = new ResizeObserver((entries, observer) => {
      entries.forEach(({ target }) => {
        setSize({ width: target.clientWidth, height: target.clientHeight });
      });
    });
    sizeObserver.observe(comRef.current);

    return () => sizeObserver.disconnect();
  }, [comRef]);

  return [size];
};

function App() {
  const comRef = React.useRef();
  const [comSize] = useComponentSize(comRef);

  return (
    
      
      {JSON.stringify(comSize)}
    
  );
}

ReactDOM.render(, document.getElementById("root"));

Maximum update depth exceeded with useLayoutEffect, useRef

1 Answers