This section describes common troubleshooting technics to debug and improve your apps.

Constant re-rendering detected

If you're experiencing performance issues or encountering the "Constant re-renders detected" message, this could point to a cyclic dependency in your app or other performance-related issues:
  • Use of Math.random() or new Date().getTime() in computed component properties: Such declarations generate a new unique value every time UI Bakery re-renders the page. As a result, components produce new state values in component variables like {{ui.input.value}}, which subsequently triggers another re-render. It's advisable to avoid such declarations.
  • Cyclic dependencies in component configurations: For example, you might have two input components where each input references the value of the other input (i.e., {{ui.input.value}}) as its Value property. This setup can lead to continuous re-renders and may significantly impede the app's performance.
  • Infinite cycles in action code: Check for loops like while(true) that might continuously produce new values, leading to persistent re-renders.
  • Improper use of UI Bakery state variables: Utilizing broad scopes, such as {{state}} or {{actions}} in component properties, can prompt UI Bakery to continuously update the page, ensuring it reflects the most recent values. It's recommended to modify these references to point to precise values, like {{state.variableName}}.