ember-learn / ember-learn/guides-source
Explain fundamental issue with reading a tracked property and updating it within the same render.
- 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
Assessment
This issue has not been assessed yet.