If `onResize`, `onResizeStart`, or `onResizeEnd` change, new values are ignored

[jwalton]

On the initial render of a pane, we call registerPane(), passing in the various onResize handlers. The problem is that if these functions change on a subsequent render, the updated functions will be ignored. For example, I'm trying to keep track of whether or not one panel is "maximized":

    const { observe: refTopPane, height } = useDimensions();
    const isMaximized = height < 10;

    const onPaneResize =(size: FrValue) => {
        if (!isMaximized) {
            setPreviousSizes([size, `${1 - sizeNumber}fr`]); // Save current sizes
        }
    };

    ...

    <Resplit.Pane
                ref={refTopPane}
                onResizeEnd={onPaneResize}
            >    

But here isMaximized is always going to be false, because even though I pass in a new onResizeEnd handler every render, only the initial onResizeEnd is ever called.

A good way to work around this would be to store the onResizeEnd in a useRef inside of Pane. Something like:

    const onResizeEndRef = useRef(onResizeEnd);
    onResizeEndRef.current = onResizeEnd;

then pass this ref in to registerPane(). The ref will be updated on every render, and whenever we need to call the callback we'll have access to the latest version.

[Lisa-Wall]

If this got fixed, we could remove our workaround. #upvote

[KenanYusuf]

Hi @jwalton @Lisa-Wall

Thanks for logging the issue! Could you please try installing v1.3.2-alpha.0 and see if that solves your issue?