3 ms·
This reminded me, I saw tooltips being a large chunk when I profiled my react app. I should go and check that. Similarly, adding a modal like this {isOpen &&
by adithyassekhar 1y ago
This reminded me, I saw tooltips being a large chunk when I profiled my react app. I should go and check that.
Similarly, adding a modal like this
{isOpen && <Modal isOpen={isOpen} onClose={onClose} />}
instead of
<Modal isOpen={isOpen} onClose={onClose} />
Seems to make the app smoother the more models we had. Rendering the UI (not downloading the code, this is still part of the bundle) only when you need it seems to be a low hanging fruit for optimizing performance.
- pathartl 1y agoIn the Blazor space we use factories/managers to spawn new instances of a modal/tooltip instead of having something idle waiting for activation. The tradeoff is for more complicated components, first renders can be slower.
- trylist 1y agoI remember solving this problem before. These are both global components, so you create a single global instance and control them with a global context or function. You basically have a global part of the component and a local part. The global part is what actually gets rendered when necessary and manages current state, the local part defines what content will be rendered inside the global part for a particular trigger and interacts with the global part when a trigger condition happens (eg hover timeout for a tooltip).
- high_priest 1y agoReact devs re-discovering DOM manipulation... SMH. This is, in general, the idea that is being solved by native interaction with the DOM. It stores the graphic, so it doesn't have to be re-instated every time. Gets hidden with "display:none" or something. When it needs to display something, just the content gets swapped and the object gets 'unhidden'. Good luck.
- jitl 1y agoThe post you’re replying to is saying they went FROM always having the component mounted (at least in the component tree if not in the DOM as display:hidden), TO only mounting the component when it needs to be open. They moved from the way you’re talking about, to creating the component/DOM nodes only when needed. Excessive nodes - hidden or not - cost memory. On midrange Android it’s scarce and even if you’re not pushing against overall device memory limit, the system is more likely to kill your tab in the background if you’ve got a lot going on.
- adithyassekhar 1y agoEspecially when you know the user won't be opening half of those. I did'nt use a global one because the modals themselves have some complex logic inside.
- deleted 1y ago[deleted]
- llbbdd 1y ago"Devs use React because they how to use the web platform, here's how to do it right" and then posts a vanilla solution that doesn't solve understand or solve the problem. Tale as old as time. Bonus points if covering the edge cases in the vanilla solution and making it work for a second component would involve a tiny homegrown reimplentation of most of React anyway.
- deleted 1y ago[deleted]
- aiiizzz 1y agoThat breaks the out transition.
- amatecha 1y agoSo, win-win? I want a modal to get out of the way as fast as possible, any fade/transition animations are keeping me from what I want to look at. :)
- chamomeal 1y agoThe designers don’t want to break the out transition, and the PM wants whatever the designer wants
- akie 1y agoUnless you set `isOpen` only when the transition has ended
- debugnik 1y agoIsn't isOpen = false what triggers the transition in the first place here?
- abdusco 1y agoEven when using view transitions? https://developer.mozilla.org/en-US/docs/Web/CSS/@starting-style https://developer.mozilla.org/en-US/docs/Web/CSS/@starting-s...
- csande17 1y agoThe "Transitioning elements on DOM addition and removal" example in that article uses a setTimeout() to wait an extra 1000 milliseconds before removing the element from the DOM. If you immediately remove the element from the DOM (like would usually happen if you do {isOpen && <Modal />} in React), it'll vanish immediately and won't have time to play the transition.
- btown 1y ago
- Cthulhu_ 1y agoAlternatively, how many modals can be open at any given time? And is it a floating element? May be an option to make it a global single instance thing then, set the content when needed. Allows for in/out transitions, too, as another commenter pointed out. See also "Portals" in React.
- adithyassekhar 1y agoThere is only one. Won't contexts cause rerenders through the tree? We already use portals. It's just each modal have complex logic inside them that they're their own component.