# Maintaining component state through route transitions - EmberJS

**URL:** <https://discuss.emberjs.com/t/maintaining-component-state-through-route-transitions-emberjs/11377>\
**Category:** Ember CLI\
**Created:** [August 11, 2016, 11:13pm UTC](https://discuss.emberjs.com/t/maintaining-component-state-through-route-transitions-emberjs/11377 "2016-08-11T23:13:05Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![gattra](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/gattra/32/12352_2.png) [@gattra](https://discuss.emberjs.com/u/gattra)\
**Post date:** [August 11, 2016, 11:13pm UTC](https://discuss.emberjs.com/t/maintaining-component-state-through-route-transitions-emberjs/11377/1 "2016-08-11T23:13:05Z")

</div>

I am building a single page music web app using Ember. Each track is represented on the page as a component. There are many tracks on a given page. When a user clicks play, the component updates its UI to reflect that and the master route keeps track of which track is currently playing.

But when I switch routes to explore other parts of the app, and then return to the one where the track is playing, Ember has destroyed and rebuilt each component, setting everything back to its initial state and making the route’s current\_track object obsolete.

How would I best maintain state like this across route transitions?

My route hierarchy:

```
master-route 
    liked-tracks
    favorite-tracks
    posted-tracks

```

Another way to think of this is: on soundcloud, you play a track, then navigate to a different route. When you navigate back, the playing element hasn’t lost its state or been rebuilt. I.e. the progress bar for the song isn’t reset. It’s still where it should be in relation to how far through the song you are.

---

<div class="post-metadata">

**Author:** ![atimberlake](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/atimberlake/32/11753_2.png) [@atimberlake](https://discuss.emberjs.com/u/atimberlake)\
**Post date:** [August 12, 2016, 7:26am UTC](https://discuss.emberjs.com/t/maintaining-component-state-through-route-transitions-emberjs/11377/2 "2016-08-12T07:26:49Z")

</div>

This is the perfect place to use services. Instead of the master route keeping track of the playing track, keep track of that state in a service. You can inject that service into your track component to identify whether that track is playing or not.

---

<div class="post-metadata">

**Author:** ![jasonmit](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/jasonmit/32/182_2.png) [@jasonmit](https://discuss.emberjs.com/u/jasonmit)\
**Post date:** [August 14, 2016, 10:41pm UTC](https://discuss.emberjs.com/t/maintaining-component-state-through-route-transitions-emberjs/11377/3 "2016-08-14T22:41:19Z")

</div>

Sounds like what ember-state-services solves, [https://github.com/stefanpenner/ember-state-services](https://github.com/stefanpenner/ember-state-services)