Module best practices
Best practices for building modules.
Modules are an efficient way to encapsulate reusable logic and UI elements. If overloaded, however, they can introduce hidden performance costs—especially when they load data, run logic, or render components that aren’t directly used by the parent app. When used correctly, modules don't have an impact on the performance of your app.
Keep the following best practices in mind when working with modules:
- Minimize hidden components: Avoid creating a module with a large number of hidden components. Hidden components must still be rendered and can have an impact on app performance.
- Be cautious with nested modules: It is possible to nest one module inside of another module. This does not have performance impacts, but it can make the module difficult to debug.
- Don't fetch or transform data that won't be used: Ensure that input and output queries are only running when necessary by configuring the run behavior. If your module loads data that’s not shown or needed in the parent app, move that logic out or behind a conditional.
- Utilize the Debug Tools: Use the Debug Tools to identify if a module is contributing excessive load time, query execution, or render cost—especially if performance seems fine in the parent app but slow overall.
- Module components contribute to app size: Retool separately executes each component inside your module. Including a component in a module does not prevent the component from impacting the app's performance.
- Follow app best practices: General best practices for building in Retool apply to modules. Refer to the web app best practices and the query best practices for more information.
Defer module evaluation
| Deferred module evaluation Availability | |||
|---|---|---|---|
| Cloud | Public beta | ||
| Self-hosted Edge 3.367 or later | Public beta | ||
| Self-hosted Stable Expected in an upcoming stable release. | |||
To enable this public beta, navigate to Beta > Settings and enable [Perf] Module deferred evaluation.
You can choose whether to defer module evaluation until it's viewable using the [Beta] Defer evaluation until visible setting in the Inspector. When a “deferred” module is hidden (either ‘hidden’ state is true, or it is in a hidden frame, or otherwise not being rendered), Retool defers the module's initialization. When the module is shown, Retool invokes the initialization procedure that would typically happen during app startup.
If this setting is disabled, Retool initializes all modules on initial page load.