Question about dependency trees

App Building
1

I am aiming to build high performing apps, and noticed a gap in my knowledge about dependency trees.

If I am building a lot of components with display being the only function, I feel like small mistakes can blow up the dependency tree, which really seems unneccessary if I can find a way where only the affected components are updated in the dependency tree.

For example, I can bundle all the info in one variable, or I can pass variables separately. Bundling seems to make sense as it reduced the tree, but it can also increase the load as now a change affects all components which depend on that variable (which are all display components). I used a visual representation to make this more clear:

image
image1624×1022 46.1 KB

Questions I have:

  1. When we have two separate nodes like on the left picture, does this update the nodes in layer three twice when both nodes are updated? Or does Retool already recognize this pattern and only update the third layer once
  2. when is a dependency chain triggered? For example, I have the variable {{query.data.var1}}. When I reload the data and var1 stays the same value (1 -> 1), does this update the componentn in dependency tree because data has been updated (e.g. a different variable var2 change from 1 -> 2), or does it not because var1 remains the same value?

Small details seem to make all the difference here, I'd love to hear your thoughts!

2

Hi @Jeroen_Vermunt, great questions! :face_with_monocle:

There is currently a feature request to provide a visual representation of an app's dependency graph, but there are no current updates on it. I attached your topic to the FR and we'll notify you when there are any updates.

To give you the most accurate response, I extended your questions to our engineers and here are the answers:

  1. The nodes in layer three will only update once. The changes on both nodes will update the tree directly, it updates property values first, then percolates changes through the graph using topological sort.
  2. When we reload the data and var1 stays the same value (1 -> 1), the components will update because the value will be boxed in a new object reference.
    ​

If we would like to work around the “updates with same value” effect in 2) then we can create an indirect dependency via a state variable instead of creating a direct dependency to the query.data variable. Then, use a JS query post success handler to update the state variable only if the value has not changed.

3

Thanks a lot, I will look into the optimal solution for my case!

4

You are welcome! :slightly_smiling_face: