title: Using component lifecycle events in Ember
body: <p>According to the latest Ember docs, using observers is discouraged in favor of overriding the component lifecycle hooks. What I'm not sure about is how to effectively use these hooks. The docs say that you can use <code>didUpdateAttrs</code> and <code>didReceiveAttrs</code> as replacements for observers. </p>
  
  <p>So let's say that I have a component that charts out some data. The component looks something like:</p>
  
  <pre><code>{{my-chart data=data showLabels=showLabels otherProps=otherProps}}
  </code></pre>
  
  <p>When <code>data</code> is set, it needs to perform some analytics on the data, so this should only happen if <code>data</code> is truely new data. The <code>showLabels</code> attribute shows/hides labels in the chart and is toggled via something outside of <code>my-chart</code>.</p>
  
  <p>I choose to use the <code>didReceiveAttrs</code> as it run on initial and subsequent renders, and coded it something like:</p>
  
  <pre><code>didReceiveAttrs() {
      let data = this.getAttr('data');
      this.performAnalytics(data);
  
      let showLabels = this.get('showLabels');
      this.updateHideLabels(showLabels);
  }
  </code></pre>
  
  <p>The problem with this is that all the code within <code>didReceiveAttrs</code> is run every time any attribute is changed. So if the user repeatedly performs the action that causes <code>showLabels</code> to change, then <code>performAnalytics</code> is also called, which is bad since it causes the chart to refresh.</p>
  
  <p>My specific question is, how do I use lifecycle events like <code>didReceiveAttrs</code> as an observer so that only the attribute that has changed has its code path executed?</p>
  
  <p>I'll say that I tried storing off the attribute and comparing that to the incoming attribute, but I feel that's inefficient, especially in the case of <code>data</code> which is an array of complex objects.</p>