diff --git a/packages/ember-htmlbars/lib/morphs/morph.js b/packages/ember-htmlbars/lib/morphs/morph.js
index a9739ab37c0..0b8f18a8c86 100644
--- a/packages/ember-htmlbars/lib/morphs/morph.js
+++ b/packages/ember-htmlbars/lib/morphs/morph.js
@@ -7,9 +7,16 @@ function EmberMorph(DOMHelper, contextualElement) {
   this.HTMLBarsMorph$constructor(DOMHelper, contextualElement);
 
   this.emberView = null;
-  this.emberComponent = null;
   this.emberToDestroy = null;
   this.streamUnsubscribers = null;
+
+  // A component can become dirty either because one of its
+  // attributes changed, or because it was re-rendered. If any part
+  // of the component's template changes through observation, it has
+  // re-rendered from the perpsective of the programming model. This
+  // flag is set to true whenever a component becomes dirty because
+  // one of its attributes changed, which also triggers the attribute
+  // update flag (didUpdateAttrs).
   this.shouldReceiveAttrs = false;
 }
 
diff --git a/packages/ember-htmlbars/lib/node-managers/component-node-manager.js b/packages/ember-htmlbars/lib/node-managers/component-node-manager.js
index 8ff5a403a4d..d57d6430095 100644
--- a/packages/ember-htmlbars/lib/node-managers/component-node-manager.js
+++ b/packages/ember-htmlbars/lib/node-managers/component-node-manager.js
@@ -1,12 +1,11 @@
-import merge from "ember-metal/merge";
 import Ember from "ember-metal/core";
+import { assign } from "ember-metal/merge";
 import buildComponentTemplate from "ember-views/system/build-component-template";
 import lookupComponent from "ember-htmlbars/utils/lookup-component";
 import getCellOrValue from "ember-htmlbars/hooks/get-cell-or-value";
 import { get } from "ember-metal/property_get";
 import { set } from "ember-metal/property_set";
 import setProperties from "ember-metal/set_properties";
-import View from "ember-views/views/view";
 import { MUTABLE_CELL } from "ember-views/compat/attrs-proxy";
 import { instrument } from "ember-htmlbars/system/instrumentation-support";
 
@@ -45,63 +44,31 @@ ComponentNodeManager.create = function(renderNode, env, options) {
     return component || layout;
   });
 
-  //var componentInfo = { layout: found.layout };
-
   if (component) {
     let createOptions = { parentView };
 
-    // Some attrs are special and need to be set as properties on the component
-    // instance. Make sure we use getValue() to get them from `attrs` since
-    // they are still streams.
-    if (attrs.id) { createOptions.elementId = getValue(attrs.id); }
-    if (attrs.tagName) { createOptions.tagName = getValue(attrs.tagName); }
-    if (attrs._defaultTagName) { createOptions._defaultTagName = getValue(attrs._defaultTagName); }
-    if (attrs.viewName) { createOptions.viewName = getValue(attrs.viewName); }
-
-    if (component.create && parentScope && parentScope.self) {
-      createOptions._context = getValue(parentScope.self);
-    }
+    // Map passed attributes (e.g. <my-component id="foo">) to component
+    // properties ({ id: "foo" }).
+    configureCreateOptions(attrs, createOptions);
 
+    // If there is a controller on the scope, pluck it off and save it on the
+    // component. This allows the component to target actions sent via
+    // `sendAction` correctly.
     if (parentScope.locals.controller) {
       createOptions._controller = getValue(parentScope.locals.controller);
     }
 
-    component = createOrUpdateComponent(component, createOptions, renderNode, env, attrs);
-
-    // Even though we looked up a layout from the container earlier, the
-    // component may specify a `layout` property that overrides that.
-    // The component may also provide a `template` property we should
-    // respect (though this behavior is deprecated).
-    let componentLayout = get(component, 'layout');
-    let componentTemplate = get(component, 'template');
-
-    if (componentLayout) {
-      layout = componentLayout;
+    // Instantiate the component
+    component = createComponent(component, createOptions, renderNode, env, attrs);
 
-      // There is no block template provided but the component has a
-      // `template` property.
-      if ((!templates || !templates.default) && componentTemplate) {
-        Ember.deprecate("Using deprecated `template` property on a Component.");
-        templates = { default: componentTemplate.raw };
-      }
-    } else if (componentTemplate) {
-      // If the component has a `template` but no `layout`, use the template
-      // as the layout.
-      layout = componentTemplate;
-    }
-
-    renderNode.emberView = component;
+    // If the component specifies its template via the `layout` or `template`
+    // properties instead of using the template looked up in the container, get
+    // them now that we have the component instance.
+    let result = extractComponentTemplates(component, templates);
+    layout = result.layout || layout;
+    templates = result.templates || templates;
 
-    if (component.positionalParams) {
-      // if the component is rendered via {{component}} helper, the first
-      // element of `params` is the name of the component, so we need to
-      // skip that when the positional parameters are constructed
-      let paramsStartIndex = renderNode.state.isComponentHelper ? 1 : 0;
-      let pp = component.positionalParams;
-      for (let i=0; i<pp.length; i++) {
-        attrs[pp[i]] = params[paramsStartIndex + i];
-      }
-    }
+    extractPositionalParams(renderNode, component, params, attrs);
   }
 
   var results = buildComponentTemplate({ layout: layout, component: component }, attrs, {
@@ -112,97 +79,150 @@ ComponentNodeManager.create = function(renderNode, env, options) {
   return new ComponentNodeManager(component, parentScope, renderNode, attrs, results.block, results.createdElement);
 };
 
-ComponentNodeManager.prototype.render = function(env, visitor) {
+function extractPositionalParams(renderNode, component, params, attrs) {
+  if (component.positionalParams) {
+    // if the component is rendered via {{component}} helper, the first
+    // element of `params` is the name of the component, so we need to
+    // skip that when the positional parameters are constructed
+    let paramsStartIndex = renderNode.state.isComponentHelper ? 1 : 0;
+    let pp = component.positionalParams;
+    for (let i=0; i<pp.length; i++) {
+      attrs[pp[i]] = params[paramsStartIndex + i];
+    }
+  }
+}
+
+function extractComponentTemplates(component, _templates) {
+  // Even though we looked up a layout from the container earlier, the
+  // component may specify a `layout` property that overrides that.
+  // The component may also provide a `template` property we should
+  // respect (though this behavior is deprecated).
+  let componentLayout = get(component, 'layout');
+  let componentTemplate = get(component, 'template');
+  let layout, templates;
+
+  if (componentLayout) {
+    layout = componentLayout;
+    templates = extractLegacyTemplate(_templates, componentTemplate);
+  } else if (componentTemplate) {
+    // If the component has a `template` but no `layout`, use the template
+    // as the layout.
+    layout = componentTemplate;
+    templates = _templates;
+    Ember.deprecate("Using deprecated `template` property on a Component.");
+  }
+
+  return { layout, templates };
+}
+
+// 2.0TODO: Remove legacy behavior
+function extractLegacyTemplate(_templates, componentTemplate) {
+  let templates;
+
+  // There is no block template provided but the component has a
+  // `template` property.
+  if ((!templates || !templates.default) && componentTemplate) {
+    Ember.deprecate("Using deprecated `template` property on a Component.");
+    templates = { default: componentTemplate.raw };
+  } else {
+    templates = _templates;
+  }
+
+  return templates;
+}
+
+function configureCreateOptions(attrs, createOptions) {
+  // Some attrs are special and need to be set as properties on the component
+  // instance. Make sure we use getValue() to get them from `attrs` since
+  // they are still streams.
+  if (attrs.id) { createOptions.elementId = getValue(attrs.id); }
+  if (attrs.tagName) { createOptions.tagName = getValue(attrs.tagName); }
+  if (attrs._defaultTagName) { createOptions._defaultTagName = getValue(attrs._defaultTagName); }
+  if (attrs.viewName) { createOptions.viewName = getValue(attrs.viewName); }
+}
+
+ComponentNodeManager.prototype.render = function(_env, visitor) {
   var { component, attrs } = this;
 
   return instrument(component, function() {
+    let env = _env;
 
-    var newEnv = env;
     if (component) {
-      newEnv = merge({}, env);
-      newEnv.view = component;
-    }
+      env = assign({ view: component }, env);
 
-    if (component) {
       var snapshot = takeSnapshot(attrs);
-      env.renderer.setAttrs(this.component, snapshot);
-      env.renderer.willCreateElement(component);
-      env.renderer.willRender(component);
+      env.renderer.componentInitAttrs(this.component, snapshot);
+      env.renderer.componentWillRender(component);
       env.renderedViews.push(component.elementId);
     }
 
     if (this.block) {
-      this.block(newEnv, [], undefined, this.renderNode, this.scope, visitor);
+      this.block(env, [], undefined, this.renderNode, this.scope, visitor);
     }
 
     if (component) {
       var element = this.expectElement && this.renderNode.firstNode;
-      env.renderer.didCreateElement(component, element); // 2.0TODO: Remove legacy hooks.
-      env.renderer.willInsertElement(component, element);
+      env.renderer.didCreateElement(component, element);
+      env.renderer.willInsertElement(component, element); // 2.0TODO remove legacy hook
       env.lifecycleHooks.push({ type: 'didInsertElement', view: component });
     }
   }, this);
 };
 
-ComponentNodeManager.prototype.rerender = function(env, attrs, visitor) {
+ComponentNodeManager.prototype.rerender = function(_env, attrs, visitor) {
   var component = this.component;
+
   return instrument(component, function() {
+    let env = _env;
 
-    var newEnv = env;
     if (component) {
-      newEnv = merge({}, env);
-      newEnv.view = component;
+      env = assign({ view: component }, env);
 
       var snapshot = takeSnapshot(attrs);
 
-      // Notify component that it has become dirty and is about to change.
-      env.renderer.willUpdate(component, snapshot);
-
       if (component._renderNode.shouldReceiveAttrs) {
-        env.renderer.updateAttrs(component, snapshot);
+        env.renderer.componentUpdateAttrs(component, component.attrs, snapshot);
+
+        // 2.0TODO: remove legacy semantics for angle-bracket semantics
         setProperties(component, mergeBindings({}, shadowedAttrs(component, snapshot)));
+
         component._renderNode.shouldReceiveAttrs = false;
       }
 
-      env.renderer.willRender(component);
+      // Notify component that it has become dirty and is about to change.
+      env.renderer.componentWillUpdate(component, snapshot);
+      env.renderer.componentWillRender(component);
 
       env.renderedViews.push(component.elementId);
     }
 
     if (this.block) {
-      this.block(newEnv, [], undefined, this.renderNode, this.scope, visitor);
+      this.block(env, [], undefined, this.renderNode, this.scope, visitor);
     }
 
     if (component) {
       env.lifecycleHooks.push({ type: 'didUpdate', view: component });
     }
 
-    return newEnv;
+    return env;
   }, this);
 };
 
 
-export function createOrUpdateComponent(component, options, renderNode, env, attrs = {}) {
+export function createComponent(_component, options, renderNode, env, attrs = {}) {
   let snapshot = takeSnapshot(attrs);
-  let props = merge({}, options);
-  let defaultController = View.proto().controller;
-  let hasSuppliedController = 'controller' in attrs;
+  let props = assign({}, options);
+  let hasSuppliedController = 'controller' in attrs; // 2.0TODO remove
+
+  Ember.deprecate("controller= is deprecated", !hasSuppliedController);
 
   props.attrs = snapshot;
-  if (component.create) {
-    let proto = component.proto();
-    mergeBindings(props, shadowedAttrs(proto, snapshot));
-    props.container = options.parentView ? options.parentView.container : env.container;
 
-    if (proto.controller !== defaultController || hasSuppliedController) {
-      delete props._context;
-    }
+  // 2.0TODO deprecate and remove from angle components
+  let proto = _component.proto();
+  mergeBindings(props, shadowedAttrs(proto, snapshot));
 
-    component = component.create(props);
-  } else {
-    mergeBindings(props, shadowedAttrs(component, snapshot));
-    setProperties(component, props);
-  }
+  let component = _component.create(props);
 
   if (options.parentView) {
     options.parentView.appendChild(component);
@@ -213,7 +233,6 @@ export function createOrUpdateComponent(component, options, renderNode, env, att
   }
 
   component._renderNode = renderNode;
-  renderNode.emberComponent = component;
   renderNode.emberView = component;
   return component;
 }
diff --git a/packages/ember-htmlbars/lib/node-managers/view-node-manager.js b/packages/ember-htmlbars/lib/node-managers/view-node-manager.js
index e2d115436c4..cf1440a86b9 100644
--- a/packages/ember-htmlbars/lib/node-managers/view-node-manager.js
+++ b/packages/ember-htmlbars/lib/node-managers/view-node-manager.js
@@ -203,7 +203,6 @@ export function createOrUpdateComponent(component, options, createOptions, rende
   }
 
   component._renderNode = renderNode;
-  renderNode.emberComponent = component;
   renderNode.emberView = component;
   return component;
 }
diff --git a/packages/ember-htmlbars/lib/utils/subscribe.js b/packages/ember-htmlbars/lib/utils/subscribe.js
index 6a270baa9ba..ea5b7171359 100644
--- a/packages/ember-htmlbars/lib/utils/subscribe.js
+++ b/packages/ember-htmlbars/lib/utils/subscribe.js
@@ -8,6 +8,11 @@ export default function subscribe(node, scope, stream) {
   unsubscribers.push(stream.subscribe(function() {
     node.isDirty = true;
 
+    // Whenever a render node directly inside a component becomes
+    // dirty, we want to invoke the willRenderElement and
+    // didRenderElement lifecycle hooks. From the perspective of the
+    // programming model, whenever anything in the DOM changes, a
+    // "re-render" has occured.
     if (component && component._renderNode) {
       component._renderNode.isDirty = true;
     }
diff --git a/packages/ember-htmlbars/tests/integration/component_invocation_test.js b/packages/ember-htmlbars/tests/integration/component_invocation_test.js
index eea1421617c..9b0aeac0e80 100644
--- a/packages/ember-htmlbars/tests/integration/component_invocation_test.js
+++ b/packages/ember-htmlbars/tests/integration/component_invocation_test.js
@@ -88,11 +88,11 @@ QUnit.test('non-block with properties on attrs and component class', function()
 
 QUnit.test('rerendering component with attrs from parent', function() {
   var willUpdate = 0;
-  var willReceiveAttrs = 0;
+  var didReceiveAttrs = 0;
 
   registry.register('component:non-block', Component.extend({
-    willReceiveAttrs() {
-      willReceiveAttrs++;
+    didReceiveAttrs() {
+      didReceiveAttrs++;
     },
 
     willUpdate() {
@@ -109,6 +109,8 @@ QUnit.test('rerendering component with attrs from parent', function() {
 
   runAppend(view);
 
+  equal(didReceiveAttrs, 1, "The didReceiveAttrs hook fired");
+
   equal(jQuery('#qunit-fixture').text(), 'In layout - someProp: wycats');
 
   run(function() {
@@ -116,13 +118,13 @@ QUnit.test('rerendering component with attrs from parent', function() {
   });
 
   equal(jQuery('#qunit-fixture').text(), 'In layout - someProp: tomdale');
-  equal(willReceiveAttrs, 1, "The willReceiveAttrs hook fired");
+  equal(didReceiveAttrs, 2, "The didReceiveAttrs hook fired again");
   equal(willUpdate, 1, "The willUpdate hook fired once");
 
   Ember.run(view, 'rerender');
 
   equal(jQuery('#qunit-fixture').text(), 'In layout - someProp: tomdale');
-  equal(willReceiveAttrs, 2, "The willReceiveAttrs hook fired again");
+  equal(didReceiveAttrs, 3, "The didReceiveAttrs hook fired again");
   equal(willUpdate, 2, "The willUpdate hook fired again");
 });
 
diff --git a/packages/ember-htmlbars/tests/integration/component_lifecycle_test.js b/packages/ember-htmlbars/tests/integration/component_lifecycle_test.js
index 772a92b8996..c2daeaf7c7b 100644
--- a/packages/ember-htmlbars/tests/integration/component_lifecycle_test.js
+++ b/packages/ember-htmlbars/tests/integration/component_lifecycle_test.js
@@ -45,27 +45,40 @@ QUnit.test('lifecycle hooks are invoked in a predictable order', function() {
     return Component.extend({
       init() {
         this.label = label;
-        pushHook(label, 'init');
         components[label] = this;
         this._super.apply(this, arguments);
       },
-      willReceiveAttrs(nextAttrs) {
-        pushHook(label, 'willReceiveAttrs', nextAttrs);
+
+      didInitAttrs(options) {
+        pushHook(label, 'didInitAttrs', options);
       },
-      willUpdate() {
-        pushHook(label, 'willUpdate');
+
+      didUpdateAttrs(options) {
+        pushHook(label, 'didUpdateAttrs', options);
       },
-      didUpdate() {
-        pushHook(label, 'didUpdate');
+
+      willUpdate(options) {
+        pushHook(label, 'willUpdate', options);
       },
-      didInsertElement() {
-        pushHook(label, 'didInsertElement');
+
+      didReceiveAttrs(nextAttrs) {
+        pushHook(label, 'didReceiveAttrs', nextAttrs);
       },
+
       willRender() {
         pushHook(label, 'willRender');
       },
+
       didRender() {
         pushHook(label, 'didRender');
+      },
+
+      didInsertElement() {
+        pushHook(label, 'didInsertElement');
+      },
+
+      didUpdate(options) {
+        pushHook(label, 'didUpdate', options);
       }
     });
   }
@@ -89,10 +102,14 @@ QUnit.test('lifecycle hooks are invoked in a predictable order', function() {
   ok(component, "The component was inserted");
   equal(jQuery('#qunit-fixture').text(), 'Twitter: @tomdale Name: Tom Dale Website: tomdale.net');
 
+  let topAttrs = { attrs: { twitter: "@tomdale" } };
+  let middleAttrs = { attrs: { name: "Tom Dale" } };
+  let bottomAttrs = { attrs: { website: "tomdale.net" } };
+
   deepEqual(hooks, [
-    hook('top', 'init'), hook('top', 'willRender'),
-    hook('middle', 'init'), hook('middle', 'willRender'),
-    hook('bottom', 'init'), hook('bottom', 'willRender'),
+    hook('top', 'didInitAttrs', topAttrs), hook('top', 'didReceiveAttrs', topAttrs), hook('top', 'willRender'),
+    hook('middle', 'didInitAttrs', middleAttrs), hook('middle', 'didReceiveAttrs', middleAttrs), hook('middle', 'willRender'),
+    hook('bottom', 'didInitAttrs', bottomAttrs), hook('bottom', 'didReceiveAttrs', bottomAttrs), hook('bottom', 'willRender'),
     hook('bottom', 'didInsertElement'), hook('bottom', 'didRender'),
     hook('middle', 'didInsertElement'), hook('middle', 'didRender'),
     hook('top', 'didInsertElement'), hook('top', 'didRender')
@@ -115,13 +132,15 @@ QUnit.test('lifecycle hooks are invoked in a predictable order', function() {
     components.middle.rerender();
   });
 
+  bottomAttrs = { oldAttrs: { website: "tomdale.net" }, newAttrs: { website: "tomdale.net" } };
+
   deepEqual(hooks, [
     hook('middle', 'willUpdate'), hook('middle', 'willRender'),
-    hook('bottom', 'willUpdate'),
 
-    hook('bottom', 'willReceiveAttrs', { website: "tomdale.net" }),
+    hook('bottom', 'didUpdateAttrs', bottomAttrs),
+    hook('bottom', 'didReceiveAttrs', bottomAttrs),
 
-    hook('bottom', 'willRender'),
+    hook('bottom', 'willUpdate'), hook('bottom', 'willRender'),
 
     hook('bottom', 'didUpdate'), hook('bottom', 'didRender'),
     hook('middle', 'didUpdate'), hook('middle', 'didRender')
@@ -133,18 +152,18 @@ QUnit.test('lifecycle hooks are invoked in a predictable order', function() {
     components.top.rerender();
   });
 
+  middleAttrs = { oldAttrs: { name: "Tom Dale" }, newAttrs: { name: "Tom Dale" } };
+
   deepEqual(hooks, [
     hook('top', 'willUpdate'), hook('top', 'willRender'),
 
-    hook('middle', 'willUpdate'),
-    hook('middle', 'willReceiveAttrs', { name: "Tom Dale" }),
-    hook('middle', 'willRender'),
-
-    hook('bottom', 'willUpdate'),
-    hook('bottom', 'willReceiveAttrs', { website: "tomdale.net" }),
-    hook('bottom', 'willRender'),
+    hook('middle', 'didUpdateAttrs', middleAttrs), hook('middle', 'didReceiveAttrs', middleAttrs),
+    hook('middle', 'willUpdate'), hook('middle', 'willRender'),
 
+    hook('bottom', 'didUpdateAttrs', bottomAttrs), hook('bottom', 'didReceiveAttrs', bottomAttrs),
+    hook('bottom', 'willUpdate'), hook('bottom', 'willRender'),
     hook('bottom', 'didUpdate'), hook('bottom', 'didRender'),
+
     hook('middle', 'didUpdate'), hook('middle', 'didRender'),
     hook('top', 'didUpdate'), hook('top', 'didRender')
   ]);
@@ -162,8 +181,9 @@ QUnit.test('lifecycle hooks are invoked in a predictable order', function() {
   // in lifecycle hooks being invoked for the child.
 
   deepEqual(hooks, [
+    hook('top', 'didUpdateAttrs', { oldAttrs: { twitter: "@tomdale" }, newAttrs: { twitter: "@hipstertomdale" } }),
+    hook('top', 'didReceiveAttrs', { oldAttrs: { twitter: "@tomdale" }, newAttrs: { twitter: "@hipstertomdale" } }),
     hook('top', 'willUpdate'),
-    hook('top', 'willReceiveAttrs', { twitter: "@hipstertomdale" }),
     hook('top', 'willRender'),
     hook('top', 'didUpdate'), hook('top', 'didRender')
   ]);
@@ -176,27 +196,40 @@ QUnit.test('passing values through attrs causes lifecycle hooks to fire if the a
     return Component.extend({
       init() {
         this.label = label;
-        pushHook(label, 'init');
         components[label] = this;
         this._super.apply(this, arguments);
       },
-      willReceiveAttrs(nextAttrs) {
-        pushHook(label, 'willReceiveAttrs', nextAttrs);
+
+      didInitAttrs(options) {
+        pushHook(label, 'didInitAttrs', options);
       },
-      willUpdate() {
-        pushHook(label, 'willUpdate');
+
+      didUpdateAttrs(options) {
+        pushHook(label, 'didUpdateAttrs', options);
       },
-      didUpdate() {
-        pushHook(label, 'didUpdate');
+
+      willUpdate(options) {
+        pushHook(label, 'willUpdate', options);
       },
-      didInsertElement() {
-        pushHook(label, 'didInsertElement');
+
+      didReceiveAttrs(nextAttrs) {
+        pushHook(label, 'didReceiveAttrs', nextAttrs);
       },
+
       willRender() {
         pushHook(label, 'willRender');
       },
+
       didRender() {
         pushHook(label, 'didRender');
+      },
+
+      didInsertElement() {
+        pushHook(label, 'didInsertElement');
+      },
+
+      didUpdate(options) {
+        pushHook(label, 'didUpdate', options);
       }
     });
   }
@@ -220,10 +253,14 @@ QUnit.test('passing values through attrs causes lifecycle hooks to fire if the a
   ok(component, "The component was inserted");
   equal(jQuery('#qunit-fixture').text(), 'Top: Middle: Bottom: @tomdale');
 
+  let topAttrs = { attrs: { twitter: "@tomdale" } };
+  let middleAttrs = { attrs: { twitterTop: "@tomdale" } };
+  let bottomAttrs = { attrs: { twitterMiddle: "@tomdale" } };
+
   deepEqual(hooks, [
-    hook('top', 'init'), hook('top', 'willRender'),
-    hook('middle', 'init'), hook('middle', 'willRender'),
-    hook('bottom', 'init'), hook('bottom', 'willRender'),
+    hook('top', 'didInitAttrs', topAttrs), hook('top', 'didReceiveAttrs', topAttrs), hook('top', 'willRender'),
+    hook('middle', 'didInitAttrs', middleAttrs), hook('middle', 'didReceiveAttrs', middleAttrs), hook('middle', 'willRender'),
+    hook('bottom', 'didInitAttrs', bottomAttrs), hook('bottom', 'didReceiveAttrs', bottomAttrs), hook('bottom', 'willRender'),
     hook('bottom', 'didInsertElement'), hook('bottom', 'didRender'),
     hook('middle', 'didInsertElement'), hook('middle', 'didRender'),
     hook('top', 'didInsertElement'), hook('top', 'didRender')
@@ -238,20 +275,49 @@ QUnit.test('passing values through attrs causes lifecycle hooks to fire if the a
   // Because the `twitter` attr is used by the all of the components,
   // the lifecycle hooks are invoked for all components.
 
+
+  topAttrs = { oldAttrs: { twitter: "@tomdale" }, newAttrs: { twitter: "@hipstertomdale" } };
+  middleAttrs = { oldAttrs: { twitterTop: "@tomdale" }, newAttrs: { twitterTop: "@hipstertomdale" } };
+  bottomAttrs = { oldAttrs: { twitterMiddle: "@tomdale" }, newAttrs: { twitterMiddle: "@hipstertomdale" } };
+
   deepEqual(hooks, [
-    hook('top', 'willUpdate'),
-    hook('top', 'willReceiveAttrs', { twitter: "@hipstertomdale" }),
-    hook('top', 'willRender'),
+    hook('top', 'didUpdateAttrs', topAttrs), hook('top', 'didReceiveAttrs', topAttrs),
+    hook('top', 'willUpdate'), hook('top', 'willRender'),
+
+    hook('middle', 'didUpdateAttrs', middleAttrs), hook('middle', 'didReceiveAttrs', middleAttrs),
+    hook('middle', 'willUpdate'), hook('middle', 'willRender'),
+
+    hook('bottom', 'didUpdateAttrs', bottomAttrs), hook('bottom', 'didReceiveAttrs', bottomAttrs),
+    hook('bottom', 'willUpdate'), hook('bottom', 'willRender'),
+    hook('bottom', 'didUpdate'), hook('bottom', 'didRender'),
+
+    hook('middle', 'didUpdate'), hook('middle', 'didRender'),
+    hook('top', 'didUpdate'), hook('top', 'didRender')
+  ]);
+
+  hooks = [];
+
+  // In this case, because the attrs are passed down, all child components are invoked.
+
+  run(function() {
+    view.rerender();
+  });
 
-    hook('middle', 'willUpdate'),
-    hook('middle', 'willReceiveAttrs', { twitterTop: "@hipstertomdale" }),
-    hook('middle', 'willRender'),
+  topAttrs = { oldAttrs: { twitter: "@hipstertomdale" }, newAttrs: { twitter: "@hipstertomdale" } };
+  middleAttrs = { oldAttrs: { twitterTop: "@hipstertomdale" }, newAttrs: { twitterTop: "@hipstertomdale" } };
+  bottomAttrs = { oldAttrs: { twitterMiddle: "@hipstertomdale" }, newAttrs: { twitterMiddle: "@hipstertomdale" } };
 
-    hook('bottom', 'willUpdate'),
-    hook('bottom', 'willReceiveAttrs', { twitterMiddle: "@hipstertomdale" }),
-    hook('bottom', 'willRender'),
+  deepEqual(hooks, [
+    hook('top', 'didUpdateAttrs', topAttrs), hook('top', 'didReceiveAttrs', topAttrs),
+    hook('top', 'willUpdate'), hook('top', 'willRender'),
+
+    hook('middle', 'didUpdateAttrs', middleAttrs), hook('middle', 'didReceiveAttrs', middleAttrs),
+    hook('middle', 'willUpdate'), hook('middle', 'willRender'),
 
+    hook('bottom', 'didUpdateAttrs', bottomAttrs), hook('bottom', 'didReceiveAttrs', bottomAttrs),
+    hook('bottom', 'willUpdate'), hook('bottom', 'willRender'),
     hook('bottom', 'didUpdate'), hook('bottom', 'didRender'),
+
     hook('middle', 'didUpdate'), hook('middle', 'didRender'),
     hook('top', 'didUpdate'), hook('top', 'didRender')
   ]);
@@ -279,91 +345,6 @@ QUnit.test("changing a component's displayed properties inside didInsertElement(
   });
 });
 
-QUnit.test('manually re-rendering in `willReceiveAttrs` triggers lifecycle hooks on the child even if the nodes were not dirty', function() {
-  var components = {};
-
-  function component(label) {
-    return Component.extend({
-      init() {
-        this.label = label;
-        pushHook(label, 'init');
-        components[label] = this;
-        this._super.apply(this, arguments);
-      },
-      willReceiveAttrs(nextAttrs) {
-        this.rerender();
-        pushHook(label, 'willReceiveAttrs', nextAttrs);
-      },
-      willUpdate() {
-        pushHook(label, 'willUpdate');
-      },
-      didUpdate() {
-        pushHook(label, 'didUpdate');
-      },
-      didInsertElement() {
-        pushHook(label, 'didInsertElement');
-      },
-      willRender() {
-        pushHook(label, 'willRender');
-      },
-      didRender() {
-        pushHook(label, 'didRender');
-      }
-    });
-  }
-
-  registry.register('component:the-top', component('top'));
-  registry.register('component:the-middle', component('middle'));
-  registry.register('component:the-bottom', component('bottom'));
-
-  registry.register('template:components/the-top', compile('Twitter: {{attrs.twitter}} {{the-middle name="Tom Dale"}}'));
-  registry.register('template:components/the-middle', compile('Name: {{attrs.name}} {{the-bottom website="tomdale.net"}}'));
-  registry.register('template:components/the-bottom', compile('Website: {{attrs.website}}'));
-
-  view = EmberView.extend({
-    template: compile('{{the-top twitter=(readonly view.twitter)}}'),
-    twitter: "@tomdale",
-    container: container
-  }).create();
-
-  runAppend(view);
-
-  ok(component, "The component was inserted");
-  equal(jQuery('#qunit-fixture').text(), 'Twitter: @tomdale Name: Tom Dale Website: tomdale.net');
-
-  deepEqual(hooks, [
-    hook('top', 'init'), hook('top', 'willRender'),
-    hook('middle', 'init'), hook('middle', 'willRender'),
-    hook('bottom', 'init'), hook('bottom', 'willRender'),
-    hook('bottom', 'didInsertElement'), hook('bottom', 'didRender'),
-    hook('middle', 'didInsertElement'), hook('middle', 'didRender'),
-    hook('top', 'didInsertElement'), hook('top', 'didRender')
-  ]);
-
-  hooks = [];
-
-  run(function() {
-    view.set('twitter', '@hipstertomdale');
-  });
-
-  // Because each `willReceiveAttrs` hook triggered a downstream
-  // rerender, lifecycle hooks are invoked on all child components.
-
-  deepEqual(hooks, [
-    hook('top', 'willUpdate'),
-    hook('top', 'willReceiveAttrs', { twitter: "@hipstertomdale" }),
-    hook('top', 'willRender'),
-
-    hook('middle', 'willUpdate'),
-    hook('middle', 'willReceiveAttrs', { name: "Tom Dale" }),
-    hook('middle', 'willRender'),
-
-    hook('bottom', 'willUpdate'),
-    hook('bottom', 'willReceiveAttrs', { website: "tomdale.net" }),
-    hook('bottom', 'willRender'),
-
-    hook('bottom', 'didUpdate'), hook('bottom', 'didRender'),
-    hook('middle', 'didUpdate'), hook('middle', 'didRender'),
-    hook('top', 'didUpdate'), hook('top', 'didRender')
-  ]);
-});
+// TODO: Write a test that involves deep mutability: the component plucks something
+// from inside the attrs hash out into state and passes it as attrs into a child
+// component. The hooks should run correctly.
diff --git a/packages/ember-metal-views/lib/renderer.js b/packages/ember-metal-views/lib/renderer.js
index da57e4b6dfd..9578da1ecc2 100755
--- a/packages/ember-metal-views/lib/renderer.js
+++ b/packages/ember-metal-views/lib/renderer.js
@@ -137,6 +137,12 @@ Renderer.prototype.setAttrs = function (view, attrs) {
   set(view, 'attrs', attrs);
 }; // set attrs the first time
 
+Renderer.prototype.componentInitAttrs = function (component, attrs) {
+  set(component, 'attrs', attrs);
+  component.trigger('didInitAttrs', { attrs });
+  component.trigger('didReceiveAttrs', { attrs });
+}; // set attrs the first time
+
 Renderer.prototype.didInsertElement = function (view) {
   if (view._transitionTo) {
     view._transitionTo('inDOM');
@@ -161,18 +167,33 @@ Renderer.prototype.updateAttrs = function (view, attrs) {
   this.setAttrs(view, attrs);
 }; // setting new attrs
 
+Renderer.prototype.componentUpdateAttrs = function (component, oldAttrs, newAttrs) {
+  set(component, 'attrs', newAttrs);
+
+  component.trigger('didUpdateAttrs', { oldAttrs, newAttrs });
+  component.trigger('didReceiveAttrs', { oldAttrs, newAttrs });
+};
+
 Renderer.prototype.willUpdate = function (view, attrs) {
   if (view.willUpdate) {
     view.willUpdate(attrs);
   }
 };
 
+Renderer.prototype.componentWillUpdate = function (component) {
+  component.trigger('willUpdate');
+};
+
 Renderer.prototype.willRender = function (view) {
   if (view.willRender) {
     view.willRender();
   }
 };
 
+Renderer.prototype.componentWillRender = function (component) {
+  component.trigger('willRender');
+};
+
 Renderer.prototype.remove = function (view, shouldDestroy) {
   this.willDestroyElement(view);