[Bug] Getter needlessly recomputing

🐞 Describe the Bug

See Minimal Reproduction.

🔬 Minimal Reproduction

Here is a repo. Clone, yarn, ember serve. Clicking on the link logs computing values on every click. It shouldn’t because the getter doesn’t touch any of the values that are changed on click. It is even @cached (though the same thing happens without that too).

Removing @tracked on bool fixes the issue… which doesn’t make much sense because that variable is not touched. Not passing it as an argument to the component also fixes it.

P.S. Here are the changes needed to reproduce in a new Ember repo:

app/components/foo-component.hbs

{{this.values}}

<a href="#" {{on "click" this.select}}>
  foo
</a>

app/components/foo-component.js

import { action } from '@ember/object';
import { cached, tracked } from '@glimmer/tracking';
import Component from '@ember/component';

class FooComponent extends Component {
  @tracked
  bool;

  @action
  select() {
    this.array.pushObject();
  }

  @cached
  get values() {
    console.log('computing values')
    this.bool;
    return 1;
  }
}

export default FooComponent;

app/controllers/application.js

import { A } from '@ember/array';
import Controller from '@ember/controller';

export default class ApplicationController extends Controller {
  array = A();
}

app/templates/application.hbs

{{foo-component array=this.array bool=true}}

😕 Actual Behavior

Getter recomputes.

🤔 Expected Behavior

Getter to not recompute.

🌍 Environment

• Ember: 4.3.0
• Node.js/npm: 17.8.0
• OS: Linux
• Browser: Chrome

[boris-petrov]

@gnclmorais - I believe @bertdeblock is correct - you’ve probably forgotten to rename the variable in application.hbs.

@chancancode - thanks for the detailed explanation. What you say makes sense and yes, in that sense this is working as expected. Definitely not perfect though. The reason I wanted bool to be tracked is because it’s used in other getters and if it changes, for them to recompute, it has to either be @tracked or the getters should be @computed. I just thought that it’s better to use @tracked. Never did I imagine that changing one argument would cause a modification to be done on all of them. 😃 Not sure if this is something that could be fixed in Ember or even if anyone would want to invest time in it.

Thanks for the help! I guess the issue could be closed but I’ll leave it open if someone wants to say something more or attempt a fix or something.

[bertdeblock]

I noticed that by simply changing that bool variable name to something else (like stuff), the recomputation doesn’t happen anymore.

Did you also rename it on the invocation side?

{{foo-component array=this.array bool=true}}

Maybe when you mutate the array arg (naughty) the bool arg is “dirtied” as well somehow? Triggering the values getter. Seems to work as expected when using a Glimmer component though.