# Child components based on computed properties -- when property changes, component is reinitialized

**URL:** <https://discuss.emberjs.com/t/child-components-based-on-computed-properties-when-property-changes-component-is-reinitialized/13436>\
**Category:** Uncategorized\
**Created:** [August 9, 2017, 9:33pm UTC](https://discuss.emberjs.com/t/child-components-based-on-computed-properties-when-property-changes-component-is-reinitialized/13436 "2017-08-09T21:33:21Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![skitterm](https://avatars.discourse-cdn.com/v4/letter/s/6a8cbe/32.png) [@skitterm](https://discuss.emberjs.com/u/skitterm)\
**Post date:** [August 9, 2017, 9:33pm UTC](https://discuss.emberjs.com/t/child-components-based-on-computed-properties-when-property-changes-component-is-reinitialized/13436/1 "2017-08-09T21:33:21Z")

</div>

In my app, when rendering a list of components based on a computed property, whenever that property is recomputed, each of the list of components gets blown away and reinitialized, instead of having its state preserved.

**Background:** I’m working on a carousel (clicking “next” advances you to the next item, and only one item is shown at a time). Each carousel item needs its own state, and I want each item’s image to be fully loaded before the item is shown. Hence, I have a `carousel-container` component for the carousel and the `next` button, which in its template renders an array of `carousel-item` components instead of only reusing one `carousel-item` component for the currently-shown item.

`carousel-container` has a property `special-items`, which is a computed property that returns an array of items. The template then loops over the `special-items` and renders a `carousel-item` component for each, handing it its `item`. Problem is, when the `special-items` property on `carousel-container` changes, the child components are all blown away and reinitialized. Any state they had is lost!

Here’s an example showing the issue:

> **[Ember Twiddle](https://ember-twiddle.com/#/613a352115800a9a099045e720a43e6e?openFiles=components.main-component.js%2C)**
>
> A web-based Ember.js code sharing tool that follows ember-cli's conventions.

I’m assuming this is expected behavior with computed properties. I’m not quite sure why it would blow away and reinit the child components though; shouldn’t it just update each one’s `item` property with the newly-computed item?

Regardless, anyone see a way to get around the issue I’m facing, to be able to have the child components’ state preserved when the parent component’s properties change?

---

<div class="post-metadata">

**Author:** ![martletandco](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/martletandco/32/13089_2.png) [@martletandco](https://discuss.emberjs.com/u/martletandco)\
**Post date:** [August 9, 2017, 11:12pm UTC](https://discuss.emberjs.com/t/child-components-based-on-computed-properties-when-property-changes-component-is-reinitialized/13436/2 "2017-08-09T23:12:56Z")

</div>

If you give the `each` helper a [`key`](https://emberjs.com/api/ember/2.14.1/classes/Ember.Templates.helpers/methods/each?show=inherited,protected,private,deprecated#specifying-keys) then it can use that instead to check if the elements in the array have changed. As a bonus, it also speeds up rerender on large lists

```auto
{{#each specialItems key='id' as |item|}}
	{{item-component item=item}}
{{/each}}

```

---

<div class="post-metadata">

**Author:** ![skitterm](https://avatars.discourse-cdn.com/v4/letter/s/6a8cbe/32.png) [@skitterm](https://discuss.emberjs.com/u/skitterm)\
**Post date:** [August 10, 2017, 5:17pm UTC](https://discuss.emberjs.com/t/child-components-based-on-computed-properties-when-property-changes-component-is-reinitialized/13436/3 "2017-08-10T17:17:01Z")

</div>

Excellent, that fixes it indeed! Thank you! DOM elements are preserved and I can keep the component’s state around as expected.

---

<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:** [August 10, 2017, 8:04pm UTC](https://discuss.emberjs.com/t/child-components-based-on-computed-properties-when-property-changes-component-is-reinitialized/13436/4 "2017-08-10T20:04:41Z")

</div>

This is super powerful and solves a problem that we’ve been digging into recently with a large rapidly-updating table. I had no idea that was in the framework, and so easy to implement. Thanks!