←back to thread

205 points samspenc | 1 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 #
trylist ◴[] No.45146410[source]
I 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).

replies(1): >>45148454 #
high_priest ◴[] No.45148454[source]
React 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.

replies(2): >>45149735 #>>45149852 #
1. ◴[] No.45149852{3}[source]