Best practices to improve editor performance (or to not ruin performance)

App Building
1

We notice that our editor is getting slower and slower, and this is certainly due to the fact that we are making it bigger and bigger and are adding more components each time. We are looking to reduce the load on the editor by bundling parts of the app into modules, but are not certain whether this is a good solution.

I read the App performance best practices post and wanted to ask a few general questions to increase our understanding of building performant apps:

  • What is the main contributor to poor performance? Is it a lot of components, or the front-end logic inside of those components? For example, does adding 100 component impact performance at all, or only when too much JS logic is added to those components?

  • How does lazy loading in Retool apps translate to better performance in the editor. For example, if I create the 'heavy' parts (parts with a lot of component and JS logic) of our app in a module, and put this module in a modal, does it impact performance in the same matter as embedding the module in the app without the modal?

  • Should we "clean-up" orphaned components? I noticed that sometimes the console shows notifications about ophaned components, which are deleted in the past. Somehow these still seem to be present and may impact performance. Is there a way to prevent/ fix this?

2

Hi @Jeroen_Vermunt,

Depending on the size of your app, yes using modules can be an easy way to reclaim some performance! The benefit of using modules comes from allowing you to edit several smaller apps rather than one giant one.

Note that when editing the main app (e.g. when you are combining all the modules) there is no performance benefit from using modules, since all the nested components still have to be rendered.


What is the main contributor to poor performance?

This depends, but yes both the number of components and your custom JS logic can be a factor. Each component takes about 2 milliseconds (ms) to "evaluate" plus the time to evaluate any custom JS logic (usually it's fast but will depend on the exact code you provide).

Note that this "evaluation" only happens when data updates in the component's dependency tree. This is why we advise to "minimize long dependency chains". An update to one component will take time to propagate to all it's children, taking about 2ms per component in the chain.


How does lazy loading in Retool apps translate to better performance in the editor

Using modules or modals does not automatically lazy load components. However this is something we are actively working on and should be possible in the future!

For now, lazy loading can be done ad-hoc by different techniques. For example using a button to trigger updates using the JS API instead of creating long dependency chains.


Should we "clean-up" orphaned components?

Yes cleanup any unused components since they will add to the load time. If you have trouble finding a component use the command palette to quickly select the component you are looking for.


Feel free to reach out to us at performance@retool.com with more detailed information about your app and we can help you better troubleshoot issues!

Cheers,
Juan

4 Likes