useElementSize doesn't update size when elementRef.current changes

[mterrel]

Summary

If elementRef.current within useElementSize starts out as null on initial render (typically because the target element does not render), useElementSize will not update and return the correct element size once elementRef.current changes to a non-null value.

Simplified code example

const FullScreenDialog = ({ open, title, msg }: { open: boolean; title: string; msg: string }) => {
    const hdrRef = useRef(null);
    const { height: winHeight } = useWindowSize();
    const { height: hdrHeight } = useElementSize(hdrRef);

    if (!open) return null;
    return (
        <div>
            <div ref={hdrRef}>{title}</div>
            <div style={{ height: winHeight - hdrHeight, marginTop: hdrHeight }}>{msg}</div>
        </div>
    );
};

Details

I'm using useElementSize in a full screen dialog component similar to the simplified one above. The dialog component starts out as not open (open=false), so on first render, it returns null. This means that the dialog header element I want the size of doesn't render at all on initial render and therefore, elementRef.current is null. The useLayoutEffect within useElementSize runs and calls handleSize, but because elementRef.current is null, setSize does not get called and so useElementSize returns { width: 0, height: 0 }. This is all working as expected so far.

Then, the user clicks a button to open the dialog. So my dialog component re-renders, but now with open=true so it renders to the actual elements of the dialog component. Now elementRef.current becomes an actual node. However, there is nothing that causes handleSize to get called again, so useElementSize will always return { width: 0, height: 0 }. (Note: resizing the window does cause handleSize to get called and then useElementSize returns the correct element size.)

Suggested fix

I believe the fix is simple: add elementRef?.current to the item list in the call to useLayoutEffect. Then, on a subsequent re-render of useElementSize, when elementRef?.current changes from null to non-null, handleSize will get called and the size will be updated.

Other info

This could possibly be related to #32.

[mterrel]

If you'd like, I'd be happy to submit a PR. 🙂

[juliencrn]

Hi @mterrel, good catch, indeed it's broken, thank you.

If you want to fix it by yourself, feel free to do it, it's welcome 👏

I'm looking forward to your PR 👍

[mterrel]

@juliencrn I submitted the PR. Let me know if you'd like any changes!

[juliencrn]

The new hook version is published in usehooks@2.0.0.
Thanks for your contribution, Mark!