Explain fundamental issue with reading a tracked property and updating it within the same render.

[rwjblue]

Code like the following will trigger a backtracking rerender assertion:

function updateValue(component, value) {

}

export default class MyComponent extends Component {
  @tracked value;
  _previousValue;

  constructor(owner, args) {
    super(...arguments);

    this.updateValue(args.value);  
  }

  @action
  updateValue(newValue) {
    this._previousValue = this.value;
    this.value = newValue;
  }
}

When that action is ran as a result of user interaction, it might be fine (since we are likely not inside of a tracking frame) but when it is ran initially using that code (due to reuse in the constructor) it is during a tracking frame and will throw an error like:

Error: Assertion Failed: You attempted to update `value` on `MyComponent`, but it had already been used previously in the same computation.  Attempting to update a value after using it in a computation can cause logical errors, infinite revalidation bugs, and performance issues, and is not supported.

`value` was first used:

- While rendering:
  application
    my-component

---

Our auto-tracking in-depth guide does not explain this pit-fall (or the reason for the backtracking assertion in general), and it should. We should be teaching our developers why this is an issue, so they are equipped to understand and avoid it.

[rwjblue]

@pzuraq - Do you happen to have any content already written up for this (perhaps in one of your tracking blog posts)?

[fozy81]

Just a suggestion, this explanation may fit in nicely just before this section? Perhaps a 'Zoe says...' section?