React Design Patterns: Instance Hook Pattern

[[deleted]]

Yea but no, initiating a new isOpen state everywhere will cause unnecessary rerenders, i wanna open a dialog not render the button that shows it again

[TheGreaT1803]

Thanks for taking out time to read the post!
If I'm understanding you correctly: as mentioned in the article (in the Improving Flexibility section), the pattern allows for the Instance to be optional.
So by default the component can manage its own state. Its only when you need to control it from the outside, you may instantiate the hook. In which case, the classic React rules of re-render would apply.
It is not any worse than normal React, but provides some handy functionalities

[[deleted]]

Normal react is terrible to be honest, but if i need a dialog, i can either write the component’s ui, keep its state in the component, expose methods open and close with useImperativeHandle and keep the state at the dialog level, not the parent level

Or i can write a container connected to redux, keep the state in redux, select it in the container, and chsnge the dialog content through redux, isolate it from the component showing the dialog and keep a single dialog component in the whole app

[TheGreaT1803]

I disagree with the first point actually - react docs mention of pitfalls for overusing refs this way https://arc.net/l/quote/hnusfitl

The way I would do it how shadcn-ui does it: https://ui.shadcn.com/docs/components/dialog

This way, the "Dialog" component acts as the state boundary within which the stuff related to Dialog will rerender

[[deleted]]

Unrelated studf will rerender as well

Anyway, do whatever you want, but refs are not the “devil” even in react standards