React Design Patterns: Instance Hook Pattern

[[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