[kherud]

Let's say you want to show a modal, which fetches some data and modifies the state. Based on this, new children are rendered which again fetch state. The problem of "spaghetti fetching" becomes worse the more levels of recursive fetching there are. If I understand you correctly, you argue for fetching all data upfront, and then rendering the modal and all its children all at once. This way you ensure "UI = f(state)" by removing side effects from "f".

On the other hand, I can also see some drawbacks:

  1. This goes against the idea of fetching data close to where it's used, basically promoting modularization.
  2. From the POV of the children, you have to backtrack where their data are coming from.
  3. If components always use the same data, you have to duplicate fetching their data everywhere you want to use them.
  4. You can't partially show children, but have to wait for everyone to have their data before rendering them.

I feel like there are trade-offs to be made here.