Which way is better for visible prop or open method on ref to react component?

I'm trying to encapsulate a <Drawer /> and <Modal /> component using React 16. I have referred to some projects, and now I have two approaches. which one is better?

In this case, since the state of visibility is changed in the Parent, developers using the <Modal /> component would need to put in extra effort to address performance issues if the parent component has a lot of computational logic.

const [visible, setVisible] = useState<boolean>(false);

// Parent
return <>
    <Button onClick={() => {
        setVisible(true);
    }}>Open Modal</Button>

    // Children
    <Modal visible={visible} />
</>;

Or use Ref:

// Children
const [visible, setVisible] = useState<boolean>(false);

React.useImperativeHandle(ref, () => {
    open: () => { setVisible(true) },
    close: () => { setVisible(false) },
})

return <div>
    {props.visible && children}
</div>;

// Parent
const ModalRef = useRef<{ open: () => void; close: () => void } | null>(null);

return <>
    <Button onClick={() => {
        ModalRef.current.open();
    }}>Open Modal</Button>

    <Modal ref={ModalRef} />
</>;

In this case, I unnecessarily operated on a reference to the DOM, and this type of component is not frequently destroyed. The ref may persist with the parent in the browser for a long time. The advantage is that developers no longer need to manage its state in the parent component.

Well you said it. Heavy computation in the parent would affect the child so proper logic separation and independence is the best.

Therefore go with your method 2 in that case

Although without truly checking, one could be assuming a performance bottle neck where there is none. It then becomes an overkill.

In a completely common scenario, a developer could be aiming for early performance features while there is a trickier issue at hand. This is why I’d advise to aim to be productive first before worrying so much about performance (just my personal opinion)

In your case I will use the first approach under normal circumstances but will go for the second approach when there is clear reason to. Keeping code very simple has proven to be useful over the past decades now.

Component decoupling had always been the main bone of contention with react components. This allows code reuse, modularity and code maintenance.

If while decoupling, you achieved a feature where the computation in the parent no longer affects the child then that’s the best way to go.

Personally I haven’t come across important disadvantages with this approach.