Asynchronously warning

[kkh975]

I use react@18.3.1, react-resize-detector@12.0.2 and react-router-dom@6.10.0.
But sometimes, useResizeDetector behaves like this when the route changes.

Can't perform a React state update on a component that hasn't mounted yet. This indicates that you have a side-effect in your render function that asynchronously later calls tries to update the component. Move this work to useEffect instead.

---

My code is below.

const chartElemRef = useRef<HTMLDivElement>();

useResizeDetector({
  handleWidth: true,
  handleHeight: false,
  targetRef: chartElemRef,
});

[kkh975]

@mherold, I think the setTimeout in the useRefProxy function can bring up an error.

export const useRefProxy =
  <T extends HTMLElement = any>(targetRef: React.MutableRefObject<T | null> | undefined) => {

    // ...

    if (targetRef) {
      setTimeout(() => {
        if (targetRef.current !== refElement) {
          setRefElement(targetRef.current);
        }
      }, 0);
    }

    // ...

    return { refProxy, refElement, setRefElement };
  };