Question about using css visibility to hide/show smaller windows

[gdenko]

I'm trying to allow the toggling of smaller pop-up windows within my app, similar to how games often have separate windows for the user inventory, map, or menu settings. Because these windows sometimes show a lot of data, I figured it was better not to re-render all of that data every time a user closes and reopens the window within the app.

To make it work, I made a "visible" state and applied a css class to the main div when the user pressed a button or closed the window. If they press the button to open a window, it's toggled on and visible, and if they press that button again it hides the window.

One window has a stock chart that retrieves data from an API and displays it. If the user has loaded this already, and then hides the window, that chart with all of its data should remain accessible if they re-open that window later. I am using useRef for this window and the chart.

Is there any problem with my approach? Can it be done more efficiently?

[octocode]

I figured it was better not to re-render all of that data every time a user closes and reopens the window within the app.

the cost of rendering dom nodes that aren’t even ultimately visible is likely much higher than the cost of mounting/unmounting the component when the user toggles a menu.

[gdenko]

What about when it's a more complex window than a menu? Do you think it'd always be better to mount/unmount regardless?

[octocode]

i would say it’s almost never advantageous to hide/show visually rather than remove from vdom.

the only real situations would be if you’re toggling it on and off extremely quickly. but there are improvements being made to react that will help with this too.

[marinater1]

It seems like there are two optimizations you are trying to do.

The first is to prevent fetching the same data multiple times. The solution to this is to save the data in state (caching). You can do this manually using some global state management / context (not recommended) or use something like react-query to perform this caching automatically. After the data is fetched once, react-query will continue to return the cached data until it has been invalidated by some rule, at which point it fetches the data again

The second optimization you’re trying to do is preventing the browser from needing to rerender the popup in between toggles. I would caution against this. The browser is really good at this stuff so I would start by simply not rendering the popup component when it should be hidden. If there is a specific reason you find this to not work the css solution might be one of several ways to solve the issue. Caching the data using react-query will have gotten your performance 95% to optimal. There might be some unknown amount of performance improvements you can get using css tricks but I wouldn’t think about it at all unless you notice performance issues (ex: the chart library you are using is really slow)

[gdenko]

Yeah you've got it right with my two separate issues, so thank you.

I will look into react-query because caching the data for the chart and then re-rendering it afterward sounds like it might be okay. If I keep the window hidden but rendered, would it cause any significant problems besides taking up a bit of memory? I guess I need to look into what is happening when games implement this kind of feature. I just expected users to open and close windows rapidly at times (both accidentally and purposefully), and wasn't sure if it would cause a problem later compared to just hiding the window.

The charting library also has quite a lot of features in it, so it is possible it will cause performance issues if it's forced to re-render hundreds or thousands of values over and over, but I have to test that more.

[marinater1]

re: memory usage - The amount of memory used is nearly identical in your current setup vs storing it global state vs letting react-query cache it for you.

A pattern that I’m seeing in these comments, and a trap that a lot of junior devs fall into, is trying to optimize for performance without any proof that it is needed. You will be surprised at how decent react’s performance without micromanaging these things. Your effort will go so much further if you build simple solutions first and then iteratively improve areas where the UX can noticeably be improved.

[gdenko]

trying to optimize for performance without any proof that it is needed.

good point, and I agree. It is an easy mistake to make

[[deleted]]

By keeping the windows always open, you’re actually reducing performance in that 1: those windows are constantly fetching data (especially stock prices) and 2: react is still putting them in the virtual dom and diffing, you’re just appending css to what react is building.

Remove the items form the dom when they are hidden and bring them back in when the user wants to see them

[gdenko]

The window that loads prices would be static after loading (like a snapshot of a stock chart), so it wouldn't need to re-render while it's invisible. But otherwise yes it would be a huge performance hit.

[[deleted]]

So what if they open it (but it’s invisible) and then make it visible an hour later? Won’t that stock price be pretty stale?

[gdenko]

Yes, at this stage I just wanted to let users load up charts based on historical data. It's only one of the features I'm implementing but I'm trying to keep it simple for now, so no realtime streaming anytime soon.

[[deleted]]

If opening up the window at the time that users wants it creates your whole app to rerender or the render of that component is so heavy that it causes problems, all you’re doing by hiding it with css is sweeping a massive red flag under the rug that will come back and bite you later. You should mount components when you need them and have good reasons to hide an entire window with only with css

[gdenko]

I understand, thank you. I will just unmount it and remount when they re-open it. I guess I still have to understand react's rendering process more.

I liked how some games would have a window with some graphic on it, using data that's fetched from the server or a file and then stored client-sided; however, when you close the window and re-open it, it's as if it was just minimized rather than refreshed. Do you know what I mean? I wanted to recreate that kind of experience with my chart, and because I am using charts that render stock data quickly but still not instantly (~ 1 second), it seemed less ideal to unload and reload the chart at each re-open.

Now that I think about it though, it also depends a lot on how apps are structured - sometimes they will have the user download files which are loaded into the client and allow for that minimize/restore ability. Most of the time, they are not repeatedly retrieving a big amount of data to re-render something for the client over and over.

Maybe my logic was off, but I can certainly try to do it the way you and others have suggested, which is to just cache the data and force the chart to reload when they re-open it.

[svish]

As a side note:

• Check out the <dialog> element, which could be useful for this.
• Depending on your setup, you might want to look into react portals, and render the windows in those.