useResizeDetector with targetRef - version 1.3.1

Hi, if have the following problem with the new targetRef: If I use: const {width, height} = useResizeDetector({targetRef: someRef}) width and height are always undefined for my component Whereas if I use: const {width, height} = useResizeDetector({targetRef: someRef, onResize: ()=>{}}) I get the correct dimensions of the someRef component,… which doesn’t really make sense to me. I suspect react-resize-detector is not reacting to ref changes properly. Adding ref.current to the dependency array [refreshMode, refreshRate, refreshOptions, handleWidth, handleHeight, onResize] (which helps in my case) seems to be wrong and “wrong” Any ideas? Cheers,

[maslianok]

Aha, I see…

You’re trying to implement the approach Dan mentioned in this comment , right?

Does it change the library API? I mean that you can’t pass targetRef anymore, right? Can you provide a code snippet of how it’s intended to be used?

[mungojam]

Similar to the above, I found that I was getting an initial delay before the width and height would get assessed. Using something in the current react docs, I was able to fix it by avoiding useRef altogether as they recommend:

    const [wrapperRef, setWrapperRef] = useState<
      MutableRefObject<unknown> | undefined
    >(undefined);

    const refCallback = useCallback((node) => {
      setWrapperRef({ current: node });
    }, []);

    const { width, height } = useResizeDetector({
      targetRef: wrapperRef,
    });

    return 
      <div ref={refCallback}>
	<MyBitsUsingWidthAndHeight />
      </div>

I wonder if you should do similar. I’ve asked if they can add an equivalent example to the beta docs, because I might be relying on some legacy ref thing here.