4 ms·

I mean in react if it’s gone from the render tree, it’s gone. I know there are libs like transition-group but I honestly don’t understand how they work. And th

I mean in react if it’s gone from the render tree, it’s gone. I know there are libs like transition-group but I honestly don’t understand how they work. And the “react way” is to have the UI reflect state. If the state says the modal is not being rendered, it should not be rendered

jitl 1y ago
Yes, React’s main idea is f(state) -> UI; but what’s returned from render is a declarative specification of what the UI should be. It’s up to React (and library authors) to make sure the UI ends up as we specify without our app logic needing to be concerned with how that happens. I view managing transition out animations for a component removed from the render tree the same way: I’m happy if the incidental complexity is encapsulated in a library (either a third party one or something I write myself), rather than spread across the whole app. There are many high quality third party tools to help with this, such as Motion’s <AnimatePresence> (https://motion.dev/docs/react-animate-presence https://motion.dev/docs/react-animate-presence). I haven’t used the library you mentioned, but it seems somewhat unmaintained and isn’t compatible with react-dom@19. First party support is coming to React with the new <ViewTransition> component (https://react.dev/reference/react/ViewTransition https://react.dev/reference/react/ViewTransition). If you insist that only the React maintainers are allowed to diverge DOM state from the render tree or write code you don’t understand, you can adopt it today from react{,-dom}@experimental. It’s been available there since April (https://react.dev/blog/2025/04/23/react-labs-view-transitions-activity-and-more#view-transitions https://react.dev/blog/2025/04/23/react-labs-view-transition...).
- jitl 1y ago
  For anyone curious, here's a proof-of-concept of how to implement a <Modal> that manages its own transition out when it's unmounted using just ReactDOM.createPortal and React.useLayoutEffect. https://stackblitz.com/edit/react-modal-with-transition-out?devToolsHeight=33&file=src%2FApp.js https://stackblitz.com/edit/react-modal-with-transition-out?...
  - chamomeal 1y ago
    awesome thanks!! Ok it all makes sense now. I’d forgotten about useLayoutEffect. Haven’t had to write much react recently.

jitl 1y ago

Yes, React’s main idea is f(state) -> UI; but what’s returned from render is a declarative specification of what the UI should be. It’s up to React (and library authors) to make sure the UI ends up as we specify without our app logic needing to be concerned with how that happens. I view managing transition out animations for a component removed from the render tree the same way: I’m happy if the incidental complexity is encapsulated in a library (either a third party one or something I write myself), rather than spread across the whole app. There are many high quality third party tools to help with this, such as Motion’s <AnimatePresence> (https://motion.dev/docs/react-animate-presence https://motion.dev/docs/react-animate-presence). I haven’t used the library you mentioned, but it seems somewhat unmaintained and isn’t compatible with react-dom@19. First party support is coming to React with the new <ViewTransition> component (https://react.dev/reference/react/ViewTransition https://react.dev/reference/react/ViewTransition). If you insist that only the React maintainers are allowed to diverge DOM state from the render tree or write code you don’t understand, you can adopt it today from react{,-dom}@experimental. It’s been available there since April (https://react.dev/blog/2025/04/23/react-labs-view-transitions-activity-and-more#view-transitions https://react.dev/blog/2025/04/23/react-labs-view-transition...).

jitl 1y ago
For anyone curious, here's a proof-of-concept of how to implement a <Modal> that manages its own transition out when it's unmounted using just ReactDOM.createPortal and React.useLayoutEffect. https://stackblitz.com/edit/react-modal-with-transition-out?devToolsHeight=33&file=src%2FApp.js https://stackblitz.com/edit/react-modal-with-transition-out?...
- chamomeal 1y ago
  awesome thanks!! Ok it all makes sense now. I’d forgotten about useLayoutEffect. Haven’t had to write much react recently.