ember-learn / ember-learn/guides-source

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

Open
#1,528 2 comments 2 reactions 0 assignees View on GitHub
Dominant language
HTML
Stars
161
Forks
512
Avg merge
4d 9h
Merged PRs (30d)
4

Description

Code like the following will trigger a backtracking rerender assertion:

```js
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.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.