Post

There is a dichotomy of UI elements. Some elements are a part of your component tree. Cards, form elements, carousels, etc. Some elements don't make much sense as a part of a component tree: toasts, dialogs, alerts. Those are side-effect elements.

27/1/26, 4:11 pm1 repost11 likes

Artem Zakharchenko

@kettanaito.com

27 Jan

It is extremely clunky to work with a side-effect element that demands to be rendered in a tree. It doesn't belong there. Displaying a dialog and grabbing its returnValue is a part of the button's onClick logic, not the component's render.

Artem Zakharchenko

@kettanaito.com

27 Jan

Portals help a lot here, but this is a larger topic. I wish more UI libraries respected that dichotomy and didn't force developers to render things that don't belong in their component trees.

Mark Malstrom

@malstrom.me

27 Jan

How do you feel about tying these “out-of-tree” components to routing instead of state? Like the React Router modal route pattern

github.comreact-router/examples/modal-route-with-outlet at main · remix-run/react-routerDeclarative routing for React. Contribute to remix-run/react-router development by creating an account on GitHub.

Artem Zakharchenko

@kettanaito.com

27 Jan

Sometimes this makes sense. I am routing a fair bit of my UI and I'm happy about it. But not every dialog has to be a designated route. To me, there's an easy way to check if it should: should this UI state every be sharable? Routing makes UI state sharable because URL is state.

raul

@macarie.blue

27 Jan

Preach! After implementing `await userResponse(...)` the DX improved a lot in our product. The best part is that developers don't even have to care what's getting rendered, it just "holds" the code until the user decides while keeping the logic linear with no side-states to keep track of

Eva Ogbe

@evaogbe.bsky.social

27 Jan

HTML itself is in a tree. The popularity of JSX has shown that thinking in terms of component trees the same way HTML works is an easier mental model than imperatively generating HTML elements on the fly. There's a variety of ways to render side-effect components, including:

Artem Zakharchenko

@kettanaito.com

27 Jan

This is actually a great analogy because HTML renders those side-effect elements on a special layer, *outside* of the tree! The closest we got there with JSX are portals.

Eva Ogbe

@evaogbe.bsky.social

27 Jan

- write it next to the trigger and use a portal to move it to the body - write it next to the trigger and use CSS to move it to where it belongs on the page - write it at the root of the component tree and pass down or use a context of the element reference to the trigger

Eva Ogbe

@evaogbe.bsky.social

27 Jan

Whichever of those ways makes the most sense to you and your team is the one to go with. You can even mix and match. Typically people use #1 for dialogs, #2 for popovers, and #3 for toasts