# Computed property loading multiple times

**URL:** <https://discuss.emberjs.com/t/computed-property-loading-multiple-times/16212>\
**Category:** Questions\
**Created:** [February 22, 2019, 12:40pm UTC](https://discuss.emberjs.com/t/computed-property-loading-multiple-times/16212 "2019-02-22T12:40:49Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![rahul\_lakhanpal](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/rahul_lakhanpal/32/16297_2.png) [@rahul\_lakhanpal](https://discuss.emberjs.com/u/rahul_lakhanpal)\
**Post date:** [February 22, 2019, 12:40pm UTC](https://discuss.emberjs.com/t/computed-property-loading-multiple-times/16212/1 "2019-02-22T12:40:49Z")

</div>

Hello, I am working on passing a `updatedAt` property to a component to show at which time it was last updated. The way I am doing is by using `computed_property` inside of component’s js file. Although the page only uses this property at just one place on the page, it seems to load 3 times.

This computed property gets the latest udpated time from 2 different models within the app. Can you help me what the issue could be?

```auto
updatedAt: computed('student.updatedAt','marks.@each.updatedAt', function() {
    const studentupdatedAt = this.get('student.updatedAt');
    const marks = this.get('marks');

    const final = [];
    rates.forEach( function(mark){ final.push(mark.get('updatedAt')) });

    return final.sort().reverse()[0];
  }),

```

---

<div class="post-metadata">

**Author:** ![dknutsen](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/dknutsen/32/16471_2.png) [@dknutsen](https://discuss.emberjs.com/u/dknutsen)\
**Post date:** [February 22, 2019, 4:41pm UTC](https://discuss.emberjs.com/t/computed-property-loading-multiple-times/16212/2 "2019-02-22T16:41:14Z")

</div>

@rahul_lakhanpal a computed property will be recomputed every time one of the observed properties changes. So in this case every time `student.updatedAt` changes, and every time ANY of the `marks[x].updatedAt` properties change. Often the cause of many recomputes on a page/component load is due to async data loading. For example when this component is first rendered maybe the marks aren’t fully loaded yet so they start as “undefined” and each time a mark gets loaded it triggers the observer. And same with student, it could be that the first time this CP is calculated the `student.updatedAt` property is not loaded yet so when it is loaded the CP would recalculate. But without knowing anything about your models and routes and how the component is being rendered I can’t say for sure what’s happening in this case. If you wanted to debug further you could put a breakpoint inside this CP and look at what `student` and `marks` look like each time the CP is called. I would recommend using breakpoints over console logs because sometimes console logs can be misleading.

For the most part this behavior is expected and even desired but it does help to be conscious of where and when your data is being loaded to understand how often this CP will be triggered. Having it recompute often isn’t really an issue unless is causing weird side effects or performance issues.

---

<div class="post-metadata">

**Author:** ![rahul\_lakhanpal](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/rahul_lakhanpal/32/16297_2.png) [@rahul\_lakhanpal](https://discuss.emberjs.com/u/rahul_lakhanpal)\
**Post date:** [February 22, 2019, 6:23pm UTC](https://discuss.emberjs.com/t/computed-property-loading-multiple-times/16212/3 "2019-02-22T18:23:12Z")

</div>

I added a condition to return only when the `marks` field has any value.

```auto
updatedAt: computed('student.updatedAt','marks.@each.updatedAt', function() {
    const studentupdatedAt = this.get('student.updatedAt');
    const marks = this.get('marks');

    if (marks) {
    const final = [];
    final.push(studentupdatedAt);
    rates.forEach( function(mark){ final.push(mark.get('updatedAt')) });

    return final.sort().reverse()[0];
    }

    return studentupdatedAt;
  }),

```

So if the `marks` have been added, then only it will compute, else will return the `studentUpdatedAt` value.

---

<div class="post-metadata">

**Author:** ![sukima](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/sukima/32/5773_2.png) [@sukima](https://discuss.emberjs.com/u/sukima)\
**Post date:** [February 24, 2019, 7:24am UTC](https://discuss.emberjs.com/t/computed-property-loading-multiple-times/16212/4 "2019-02-24T07:24:36Z")

</div>

K.I.S.S.

```nohighlight
updatedAt: computed('{student.updatedAt,marks.@each.updatedAt}', function() {
  const studentupdatedAt = this.get('student.updatedAt');
  const marks = this.get('marks') || [];
  return [studentupdatedAt, ...marks.mapBy(‘updatedAt’)]
    .sort()
    .reverse()
    .objectAt(0);
}),

```