Tweaks to "Before You Use Context" (#1091)

![screenshot of new section](https://user-images.githubusercontent.com/6820/43227544-d9d55496-9013-11e8-8fe3-b16ed96d0070.png)

content/docs/context.md

@@ -40,35 +40,49 @@ Context is primarily used when some data needs to be accessible by *many* compon
 
 **If you only want to avoid passing some props through many levels, [component composition](/docs/composition-vs-inheritance.html) is often a simpler solution than context.**
 
-For example, consider a `Page` component that passes a `user` prop several levels down so that a deeply nested `Avatar` component can read it:
+For example, consider a `Page` component that passes a `user` and `avatarSize` prop several levels down so that deeply nested `Link` and `Avatar` components can read it:
 
 ```js
-<Page user={user} />
+<Page user={user} avatarSize={avatarSize} />
 // ... which renders ...
-<PageLayout user={user} />
+<PageLayout user={user} avatarSize={avatarSize} />
 // ... which renders ...
-<NavigationBar user={user} /> 
+<NavigationBar user={user} avatarSize={avatarSize} />
 // ... which renders ...
-<Avatar user={user} />
+<Link href={user.permalink}>
+  <Avatar user={user} size={avatarSize} />
+</Link>
 ```
 
-It might feel redundant to pass down the `user` prop through many levels if in the end only the `Avatar` component really needs it. It's also annoying that whenever the `Avatar` component needs more props from the top, you have to add them at all the intermediate levels too.
+It might feel redundant to pass down the `user` and `avatarSize` props through many levels if in the end only the `Avatar` component really needs it. It's also annoying that whenever the `Avatar` component needs more props from the top, you have to add them at all the intermediate levels too.
 
-To solve this issue **without context**, change `PageLayout` and `NavigationBar` to [accept a `children` prop](/docs/composition-vs-inheritance.html#containment). Then the `Page` component could pass `<Avatar user={user} />` down as a child, and neither of the components below would need to know about the `user` prop:
+One way to solve this issue **without context** is to [pass down the `Avatar` component itself](/docs/composition-vs-inheritance.html#containment) so that the intermediate components don't need to know about the `user` prop:
 
 ```js
 function Page(props) {
   const user = props.user;
-  return (
-    <PageLayout>
-      <NavigationBar>
-        <Avatar user={user} />
-      </NavigationBar>
-    </PageLayout>
+  const userLink = (
+    <Link href={user.permalink}>
+      <Avatar user={user} size={props.avatarSize} />
+    </Link>
   );
+  return <PageLayout userLink={userLink} />;
 }
+
+// Now, we have:
+<Page user={user} />
+// ... which renders ...
+<PageLayout userLink={...} />
+// ... which renders ...
+<NavigationBar userLink={...} />
+// ... which renders ...
+{props.userLink}
 ```
 
+With this change, only the top-most Page component needs to know about the `Link` and `Avatar` components' use of `user` and `avatarSize`.
+
+This *inversion of control* can make your code cleaner in many cases by reducing the amount of props you need to pass through your application and giving more control to the root components. However, this isn't the right choice in every case: moving more complexity higher in the tree makes those higher-level components more complicated and forces the lower-level components to be more flexible than you may want.
+
 You're not limited to a single child for a component. You may pass multiple children, or even have multiple separate "slots" for children, [as documented here](/docs/composition-vs-inheritance.html#containment):
 
 ```js
@@ -77,7 +91,9 @@ function Page(props) {
   const content = <Feed user={user} />;
   const topBar = (
     <NavigationBar>
-      <Avatar user={user} />
+      <Link href={user.permalink}>
+        <Avatar user={user} size={props.avatarSize} />
+      </Link>
     </NavigationBar>
   );
   return (