The result with this strategy is that you may need the companyName and end-up at some point with code that does back:
companyName = pageTitle
or worse:
companyName = pageTitle.split(‘ - ‘)[0]
Because there is a moment when you will need to get the companyName again for some comparison or something whatever logic (e.g. is selected account profile current company ?)
This feels very confusing.
Instead pass companyName and keep it that way until the very last moment that you display it on the page (e.g. when rendering the view/template)
If the page only makes sense if a company name is used as a title, then of course use companyName as the variable.
The idea is to write things as standalone components. Which is a pretty universal programming strategy.
On the one hand, you have some data coming in format X.
On the other hand, you need the data in format Y.
What you need is to define how to map X to Y. And then when you request Y, a way to indicate what parts of X you really need, so the code getting X can optimize, if it needs.
In my experience, the real issue is how to cache the X - should we be caching all of it depending on the Y, or should we be caching parts and understanding how they fit together. I have had problems with updating caches, and I am looking for solutions!
The problem with caching is that it is very often highly individual and it usually comes with drawbacks, i.e. you win performance here but lose it there or you win performance but you lose consistency. (related: CAP theorem)
So I doubt there is any "generic" solution that will or even could make you happy. But if you find one, let me know. :-)
I think reactive programing solves the "dependency graph" problem to you in the sense that you just have to "change" one value and then all dependencies (and their dependencies) update. You still have to define the relations though.
You are basically saying we should take a name that conveys info about its content (companyName) and change it to something that contains none (pageTitle).
I can tell if a field is being used for a page title by looking at the html, I can’t tell what it contains unless it is named well. Additionally if I ever want to hop into the backend my time on the frontend will have given me 0 context if you are renaming all the fields.
Also if you want to use Typescript this would prevent a bunch of automated type generation you could do.