How to use with mobx?

[StringKe]

I try to store the width and height in mobx, once I call the action of mobx, the resize method will not be triggered again.

const Resize: React.FC<unknown> = observer(() => {

    // The method will only be executed twice, after which there is no trigger.
    const onResize = React.useCallback((width, height) => {
        console.log(width, height);
        designStore.size.setContainer(width, height);
    }, []);

    const { width, height, ref } = useResizeDetector<HTMLDivElement>({
        refreshMode: 'debounce',
        refreshRate: 100,
        skipOnMount: true,
        onResize,
    });

    return <Box ref={ref} position={'absolute'} left={0} top={0} w={'full'} h={'full'} />;
});

You can view this video. https://cln.sh/1jXA3l

[maslianok]

I think it's a problem with the Box component, not with mobx.

I haven't worked with chakra-ui, but I suppose you may use this approach to attach ref to the components https://chakra-ui.com/guides/as-prop#option-1-using-forwardref-from-chakra-uireact

P.S. I'm sure you already solved the problem, but anyway, let me know if you need any additional help