Upgrade deprecated components
Learn how to upgrade deprecated components to their latest version.
Retool regularly adds functionality to web components. On occasion, Retool may rewrite a component in a way that significantly changes how it operates under the hood. Should this occur, an updated version of the component is made available that replaces the previous one which is no longer used in new apps. To prevent disruption, any existing apps continue to use the version of the component that was originally added.
You can continue to use deprecated components, but Retool recommends upgrading them. You can automatically upgrade deprecated a deprecated component or select multiple components to upgrade at the same time, if required. All configuration settings (event handlers, tooltips, etc.) transfer to the upgraded component.
Upgrade vs. migrate
In some cases, Retool releases a new component that is considered a replacement for an existing component, but does not directly replace it. In these instances, you must migrate to the new component rather than upgrade (e.g., migrate from the legacy Table component).
Identify components for upgrade
If a selected component in your app has been deprecated and a new version is available, the Inspector contains a message and option to upgrade.
You can upgrade a single component or all deprecated components at the same time. To upgrade a single component, click Upgrade in the Inspector.
To upgrade multiple components:
- Click the ••• button on the upper-right of the editor to open the App actions menu.
- Select Upgrade components to view a list of all deprecated components to upgrade.
- Select the components you want to upgrade and click Upgrade.
Retool occasionally must rename properties to improve clarity and consistency. For example, renaming
textAfter. Upgrading a component automatically updates any values and references to use the refactored fields.
// Before console.log(textInput1.suffix); const newVariable = textInput1; console.log(newVariable.suffix); // After console.log(textInput1.textAfter); // RENAMED const newVariable = textInput1; console.log(newVariable.suffix); // NOT RENAMED
Updated 13 days ago