←back to thread

205 points samspenc | 2 comments | | HN request time: 0s | source
Show context
adithyassekhar ◴[] No.45146246[source]
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.

replies(4): >>45146382 #>>45146410 #>>45147091 #>>45147510 #
1. Cthulhu_ ◴[] No.45147510[source]
Alternatively, 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.
replies(1): >>45150676 #
2. adithyassekhar ◴[] No.45150676[source]
There 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.