- My goal: Find out why our apps seem to be using a lot of memory
- Issue: After editing an app for awhile, I often see my browser tab over 3 gb of memory usage and the app is very sluggish. Especially when deleting an item. I often have to wait 30 or more seconds when simply deleting a event from a component.
- Steps I've taken to troubleshoot: Examined my setups but I do not feel they are really that large. Often just a table with some inputs for submitting filtering to database queries.
- Additional info: I am running on cloud. I putting this question out there because I really feel like it is worst over the past few months.
1 Like
I’ve faced this issue too and here’s what I do to manage it: Retool cloud apps can consume high memory due to large datasets, frequent or auto-running queries, and many components or states. The editor builds up memory over time, leading to sluggish performance. I make sure to run only the necessary queries and delete unused ones. I avoid storing large data in temporary state, break big apps into modules, and refresh the browser regularly. Chrome DevTools helps track memory usage and spot issues early.
The best solutions I found to avoid this are:
- Only fetch the DB columns/fields you need.
- Try to avoid unnecessary dependencies (such as hidden table rows)
- Try to store query results inside a Variable and THEN Reset ( query.rest() ) that query to clear its output, result, and the .rawData. These data are always in memory.
- Generally, try to avoid unnecessary dependencies everywhere (this means, don't use references that you don't need at the moment OR try to group multiple references into a single Transformer so the number of cross dependencies is low.
- Use pagination when possible, even if you already fetched 1000 rows, try to only display 100 per page => results in fewer HTML elements & dependencies.
These are some general advice, you might need case-specific solutions.
Thanks for the feedback. What I usually do is fetch results, then store the processed results as an object of objects(row id as key) and I store just an array of ids also in a variable. Then I use a transformer to build an array linking the array of ids to matching items in the object of objects. When a user edits an item, the item is saved to the db and when successful, I just update the values in the object of objects instead of refreshing the complete db query. I have been trying to keep a lot of dynamic processing happening in the table itself like linking thumbnail ids up with there matching data that was also called into and stored in a variable. Is the general thought that possibly performance could be better by linking up all data that I would do in the table such as the thumbnails, inside the transformer instead? The reason I have it being doing it in the table is because my thinking was it would be less processing. If doing in the transformer, every time a new image gets stored into the variable, the transformer has to render again.
I still think there is something abnormal going on with the environment. For example, I have made a little module. The module contains x5 code items and x5 components. When I create a new browser tab and open up the module in edit mode, the module is immediately consuming close to 1gb of memory. This feels really high for basically nothing in the module. It sort of feels more like a module thing. I did have two drawer modals in this module with a table and a few basic inputs but I had to remove them. The module would frequently be running over 3gb of memory and the module was noticeably impacting the performance of apps it was being used in.
I've noticed this as well - did you ever come to some sort of resolution on this?
I didn't. I still experience what I believe is abnormally bad performance. The apps I work on now are really not any different from the apps I have worked on maybe a year ago. Even really small apps or module will usually cause my web browser to think the page has stopped responding when I try to delete something a simple as an event handler on a text input. Something new I noticed is, if I deleted a folder with queries in it, they all delete really fast.
This what I experience most time I want to delete something. It almost feels like the backend is completely rebuilding the entire underlying JavaScript.
And here, I put a query I want to delete into a folder and it just gets delete right off with no hassle. I think it is because when deleting a folder, retool does not check the item in the folder for where it is being referenced.
It would be neat to get a bit of feedback from the retool team on this.