From e9ae68f55b55c5a0c7b74c6af00e2e5c5b3d99a6 Mon Sep 17 00:00:00 2001
From: Alex Krolick <alexander.krolick@gmail.com>
Date: Thu, 22 Mar 2018 20:58:22 -0700
Subject: [PATCH 01/12] remove confusing {}

---
 content/docs/context.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/context.md b/content/docs/context.md
index 2b9ccfdd..55997c8d 100644
--- a/content/docs/context.md
+++ b/content/docs/context.md
@@ -55,7 +55,7 @@ Accepts a `value` prop to be passed to Consumers that are descendants of this Pr
 
 ```js
 <Consumer>
- { value => { /* render something based on the context value */ } }
+  {value => /* render something based on the context value */}
 </Consumer>
 ```
 

From 53d604fd3a7209b2a9c1293ce094b867b7d8983d Mon Sep 17 00:00:00 2001
From: Alex Krolick <alexander.krolick@gmail.com>
Date: Thu, 22 Mar 2018 20:58:50 -0700
Subject: [PATCH 02/12] ~deprecated~ legacy

---
 content/docs/context.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/context.md b/content/docs/context.md
index 55997c8d..2f0b3c60 100644
--- a/content/docs/context.md
+++ b/content/docs/context.md
@@ -90,6 +90,6 @@ A more complex example with dynamic values for the theme:
 
 ## Legacy API
 
-> The legacy context API was deprecated in React 16.3 and will be removed in version 17.
+> The old context API was marked as legacy in React 16.3 and will be removed in version 17.
 > 
 > React previously shipped with an experimental context API. The old API will be supported in all 16.x releases, but applications using it should migrate to the new version. Read the [legacy context docs here](/docs/legacy-context.html).

From fec6d6c141def553e71aa189da30aa687db31035 Mon Sep 17 00:00:00 2001
From: Alex Krolick <alexander.krolick@gmail.com>
Date: Thu, 22 Mar 2018 21:01:59 -0700
Subject: [PATCH 03/12] Add mutliple contexts example

---
 content/docs/context.md               |  3 +++
 examples/context/multiple-contexts.js | 36 +++++++++++++++++++++++++++
 2 files changed, 39 insertions(+)
 create mode 100644 examples/context/multiple-contexts.js

diff --git a/content/docs/context.md b/content/docs/context.md
index 2f0b3c60..7c158a4e 100644
--- a/content/docs/context.md
+++ b/content/docs/context.md
@@ -88,6 +88,9 @@ A more complex example with dynamic values for the theme:
 **app.js**
 `embed:context/theme-detailed-app.js`
 
+## Consuming Multiple Contexts
+
+`embed:context/multiple-contexts.js`
 ## Legacy API
 
 > The old context API was marked as legacy in React 16.3 and will be removed in version 17.
diff --git a/examples/context/multiple-contexts.js b/examples/context/multiple-contexts.js
new file mode 100644
index 00000000..494e8cd4
--- /dev/null
+++ b/examples/context/multiple-contexts.js
@@ -0,0 +1,36 @@
+// Create a theme context, defaulting to light theme
+// highlight-next-line
+const ThemeContext = React.createContext('light');
+
+// Signed-in user context
+const UserContext = React.createContext();
+
+class App extends React.Component {
+  static propTypes = {
+    theme: PropTypes.string,
+    signedInUser: PropTypes.shape({
+      id: number,
+      name: string,
+      avatar: string,
+    }),
+  };
+
+  render() {
+    return (
+      <ThemeContext.Provider value={this.props.theme}>
+        <UserContext.Provider
+          value={this.props.signedInUser}>
+          <ThemeContext.Consumer>
+            {theme => (
+              <UserContext.Consumer>
+                {user => (
+                  <ProfilePage user={user} theme={theme} />
+                )}
+              </UserContext.Consumer>
+            )}
+          </ThemeContext.Consumer>
+        </UserContext.Provider>
+      </ThemeContext.Provider>
+    );
+  }
+}

From 7b5764fed5c35cf7b3fcc5df480abe56298852bd Mon Sep 17 00:00:00 2001
From: Alex Krolick <alexander.krolick@gmail.com>
Date: Thu, 22 Mar 2018 21:15:40 -0700
Subject: [PATCH 04/12] Add ref forwarding, lifecycle examples

---
 content/docs/context.md             | 12 ++++++++++++
 examples/context/forwarding-refs.js | 11 +++++++++++
 examples/context/lifecycles.js      | 20 ++++++++++++++++++++
 3 files changed, 43 insertions(+)
 create mode 100644 examples/context/forwarding-refs.js
 create mode 100644 examples/context/lifecycles.js

diff --git a/content/docs/context.md b/content/docs/context.md
index 7c158a4e..4441118d 100644
--- a/content/docs/context.md
+++ b/content/docs/context.md
@@ -16,6 +16,9 @@ In a typical React application, data is passed top-down (parent to child) via pr
 - [Examples](#examples)
   - [Static Context](#static-context)
   - [Dynamic Context](#dynamic-context)
+  - [Consuming Multiple Contexts](#consuming-multiple-contexts)
+  - [Accessing Context in Lifecycle Methods](#accessing-context-in-lifecycle-methods)
+  - [Forwarding Refs to Context Consumers](#forwarding-refs-to-context-consumers)
 - [Legacy API](#legacy-api)
 
 
@@ -91,6 +94,15 @@ A more complex example with dynamic values for the theme:
 ## Consuming Multiple Contexts
 
 `embed:context/multiple-contexts.js`
+
+## Accessing Context in Lifecycle Methods
+
+`embed:context/lifecycles.js`
+
+## Forwarding Refs to Context Consumers
+
+`embed:context/forwarding-refs.js`
+
 ## Legacy API
 
 > The old context API was marked as legacy in React 16.3 and will be removed in version 17.
diff --git a/examples/context/forwarding-refs.js b/examples/context/forwarding-refs.js
new file mode 100644
index 00000000..e23ae77f
--- /dev/null
+++ b/examples/context/forwarding-refs.js
@@ -0,0 +1,11 @@
+const Button = ({theme, children}) => (
+  <button className={theme ? 'dark' : 'light'}>
+    {children}
+  </button>
+);
+
+export default React.forwardRef((props, ref) => (
+  <ThemeContext.Consumer>
+    {theme => <Button {...props} theme={theme} ref={ref} />}
+  </ThemeContext.Consumer>
+));
diff --git a/examples/context/lifecycles.js b/examples/context/lifecycles.js
new file mode 100644
index 00000000..67c6f830
--- /dev/null
+++ b/examples/context/lifecycles.js
@@ -0,0 +1,20 @@
+class Button extends React.Component {
+  componentDidMount() {
+    alert(this.props.theme);
+  }
+
+  render() {
+    const {theme, children} = this.props;
+    return (
+      <button className={theme ? 'dark' : 'light'}>
+        {children}
+      </button>
+    );
+  }
+}
+
+export default props => (
+  <ThemeContext.Consumer>
+    {theme => <Button {...props} theme={theme} />}
+  </ThemeContext.Consumer>
+);

From 0d32f18b09160e5d45125dc2e27234f724d258dd Mon Sep 17 00:00:00 2001
From: Alex Krolick <alexander.krolick@gmail.com>
Date: Thu, 22 Mar 2018 21:18:38 -0700
Subject: [PATCH 05/12] Kill highlight

---
 examples/context/multiple-contexts.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/examples/context/multiple-contexts.js b/examples/context/multiple-contexts.js
index 494e8cd4..48a9efe1 100644
--- a/examples/context/multiple-contexts.js
+++ b/examples/context/multiple-contexts.js
@@ -1,5 +1,4 @@
 // Create a theme context, defaulting to light theme
-// highlight-next-line
 const ThemeContext = React.createContext('light');
 
 // Signed-in user context

From 7db107b2fc7d1bde8136a70ce09d98134337e7c9 Mon Sep 17 00:00:00 2001
From: Alex Krolick <alexander.krolick@gmail.com>
Date: Thu, 22 Mar 2018 21:38:34 -0700
Subject: [PATCH 06/12] + "default value" comment

---
 examples/context/theme-detailed-theme-context.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/context/theme-detailed-theme-context.js b/examples/context/theme-detailed-theme-context.js
index 80dd489a..b8e924d2 100644
--- a/examples/context/theme-detailed-theme-context.js
+++ b/examples/context/theme-detailed-theme-context.js
@@ -11,5 +11,5 @@ export const themes = {
 
 // highlight-range{1-3}
 export const ThemeContext = React.createContext(
-  themes.dark
+  themes.dark // default value
 );

From da091e6723a04061e917cd206fa4695cc80c4d08 Mon Sep 17 00:00:00 2001
From: Alex Krolick <alexander.krolick@gmail.com>
Date: Thu, 22 Mar 2018 22:16:08 -0700
Subject: [PATCH 07/12] Add note about how changes are determined

---
 content/docs/context.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/context.md b/content/docs/context.md
index 4441118d..72790e96 100644
--- a/content/docs/context.md
+++ b/content/docs/context.md
@@ -64,7 +64,7 @@ Accepts a `value` prop to be passed to Consumers that are descendants of this Pr
 
 A React component that subscribes to context changes.
 
-Requires a [function as a child](/docs/render-props.html#using-props-other-than-render). This function receives the current context value and returns a React node. It will be called whenever the Provider's value is updated.
+Requires a [function as a child](/docs/render-props.html#using-props-other-than-render). The function receives the current context value and returns a React node. All consumers are re-rendered whenever the Provider value changes. Changes are determined by comparing the new and old values using [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is).
 
 > Note:
 > 

From 6eb29a18f5044f58714e41d6456cc575a527a525 Mon Sep 17 00:00:00 2001
From: Alex Krolick <alexander.krolick@gmail.com>
Date: Thu, 22 Mar 2018 22:22:36 -0700
Subject: [PATCH 08/12] Combine basic examples

---
 content/docs/context.md                 | 14 +++---
 examples/context/motivation-problem.js  | 47 ++++++++------------
 examples/context/motivation-solution.js | 58 ++++++++++---------------
 examples/context/theme-detailed-app.js  | 28 +++++++++---
 examples/context/theme-example.js       | 55 -----------------------
 5 files changed, 68 insertions(+), 134 deletions(-)
 delete mode 100644 examples/context/theme-example.js

diff --git a/content/docs/context.md b/content/docs/context.md
index 72790e96..3d861a3e 100644
--- a/content/docs/context.md
+++ b/content/docs/context.md
@@ -8,7 +8,7 @@ Context provides a way to pass data through the component tree without having to
 
 In a typical React application, data is passed top-down (parent to child) via props, but this can be cumbersome for certain types of props (e.g. locale preference, UI theme) that are required by many components within an application. Context provides a way to share values like this between components without having to explicitly pass a prop through every level of the tree.
 
-- [Motivation](#motivation)
+- [When to Use Context](#when-to-use-context)
 - [API](#api)
   - [React.createContext](#reactcreatecontext)
   - [Provider](#provider)
@@ -22,9 +22,9 @@ In a typical React application, data is passed top-down (parent to child) via pr
 - [Legacy API](#legacy-api)
 
 
-## Motivation
+## When to Use Context
 
-Context is designed to relieve the pain of passing props down through a deeply nested component tree. For example, in the code below we manually thread through a color prop in order to style the Button and Message components:
+Context is designed to share data that can be considered "global" for a tree of React components, such as the current authenticated user, theme, or preferred language. For example, in the code below we manually thread through a "theme" prop in order to style the Button component:
 
 `embed:context/motivation-problem.js`
 
@@ -32,6 +32,7 @@ Using context, we can avoid passing props through intermediate elements:
 
 `embed:context/motivation-solution.js`
 
+Note: Don't use context just to avoid passing props a few levels down.
 ## API
 
 ### `React.createContext`
@@ -72,12 +73,6 @@ Requires a [function as a child](/docs/render-props.html#using-props-other-than-
 
 ## Examples
 
-### Static Context
-
-Here is an example illustrating how you might inject a "theme" using context:
-
-`embed:context/theme-example.js`
-
 ### Dynamic Context
 
 A more complex example with dynamic values for the theme:
@@ -108,3 +103,4 @@ A more complex example with dynamic values for the theme:
 > The old context API was marked as legacy in React 16.3 and will be removed in version 17.
 > 
 > React previously shipped with an experimental context API. The old API will be supported in all 16.x releases, but applications using it should migrate to the new version. Read the [legacy context docs here](/docs/legacy-context.html).
+ 
\ No newline at end of file
diff --git a/examples/context/motivation-problem.js b/examples/context/motivation-problem.js
index 80c906ce..cf9aa924 100644
--- a/examples/context/motivation-problem.js
+++ b/examples/context/motivation-problem.js
@@ -1,34 +1,23 @@
-class Button extends React.Component {
-  render() {
-    return (
-      <button style={{background: this.props.color}}>
-        {this.props.children}
-      </button>
-    );
-  }
-}
+const ThemedButton = props => {
+  //highlight-range{1}
+  return <Button theme={props.theme} />;
+};
 
-class Message extends React.Component {
-  render() {
-    // highlight-range{1-3}
-    // The Message component must take `color` as as prop to pass it
-    // to the Button. Using context, the Button could connect to the
-    // color context on its own.
-    return (
-      <div>
-        <p>{this.props.text}</p>
-        <Button color={this.props.color}>Delete</Button>
-      </div>
-    );
-  }
-}
+// An intermediate component
+const Toolbar = props => {
+  // highlight-range{1-2,5}
+  // The Toolbar component must take an extra theme prop
+  // and pass it to the ThemedButton
+  return (
+    <div>
+      <ThemedButton theme={props.theme} />
+    </div>
+  );
+};
 
-class MessageList extends React.Component {
+class App extends React.Component {
   render() {
-    const color = 'purple';
-    const children = this.props.messages.map(message => (
-      <Message text={message.text} color={color} />
-    ));
-    return <div>{children}</div>;
+    // highlight-range{1}
+    return <Toolbar theme="dark" />;
   }
 }
diff --git a/examples/context/motivation-solution.js b/examples/context/motivation-solution.js
index 76bf72cc..d1922f6d 100644
--- a/examples/context/motivation-solution.js
+++ b/examples/context/motivation-solution.js
@@ -1,43 +1,31 @@
-// highlight-range{1}
-const ColorContext = React.createContext();
+// Create a theme context, defaulting to light theme
+// highlight-next-line
+const ThemeContext = React.createContext('light');
 
-class Button extends React.Component {
-  render() {
-    // highlight-range{2-8}
-    return (
-      <ColorContext.Consumer>
-        {color => (
-          <button style={{background: color}}>
-            {this.props.children}
-          </button>
-        )}
-      </ColorContext.Consumer>
-    );
-  }
-}
+// highlight-range{1,3-5}
+// The ThemedButton receives the theme from context
+const ThemedButton = props => (
+  <ThemeContext.Consumer>
+    {theme => <Button theme={theme} />}
+  </ThemeContext.Consumer>
+);
 
-class Message extends React.Component {
-  render() {
-    return (
-      <div>
-        <p>{this.props.text}</p>
-        <Button>Delete</Button>
-      </div>
-    );
-  }
-}
+// An intermediate component
+const Toolbar = props => {
+  return (
+    <div>
+      <ThemedButton />
+    </div>
+  );
+};
 
-class MessageList extends React.Component {
+class App extends React.Component {
   render() {
-    const color = 'purple';
-    const children = this.props.messages.map(message => (
-      <Message text={message.text} />
-    ));
-    // highlight-range{2-4}
+    // highlight-range{2,4}
     return (
-      <ColorContext.Provider value={color}>
-        {children}
-      </ColorContext.Provider>
+      <ThemeContext.Provider value="dark">
+        <Toolbar />
+      </ThemeContext.Provider>
     );
   }
 }
diff --git a/examples/context/theme-detailed-app.js b/examples/context/theme-detailed-app.js
index 1b57e15d..07b3de48 100644
--- a/examples/context/theme-detailed-app.js
+++ b/examples/context/theme-detailed-app.js
@@ -1,6 +1,15 @@
 import {ThemeContext, themes} from './theme-context';
 import ThemedButton from './button';
 
+// An intermediate component that uses the ThemedButton
+const Toolbar = props => {
+  return (
+    <ThemedButton onClick={props.changeTheme}>
+      Change Theme
+    </ThemedButton>
+  );
+};
+
 class App extends React.Component {
   state = {
     theme: themes.light,
@@ -16,13 +25,20 @@ class App extends React.Component {
   };
 
   render() {
-    //highlight-range{2,6}
+    //highlight-range{1-3}
+    // The ThemedButton button inside the ThemeProvider
+    // uses the theme from state while the one outside uses
+    // the default dark theme
+    //highlight-range{3-5,7}
     return (
-      <ThemeContext.Provider value={this.state.theme}>
-        <ThemedButton onClick={this.toggleTheme}>
-          Change Theme
-        </ThemedButton>
-      </ThemeContext.Provider>
+      <div>
+        <ThemeContext.Provider value={this.state.theme}>
+          <Toolbar changeTheme={this.toggleTheme} />
+        </ThemeContext.Provider>
+        <div>
+          <ThemedButton />
+        </div>
+      </div>
     );
   }
 }
diff --git a/examples/context/theme-example.js b/examples/context/theme-example.js
deleted file mode 100644
index d96e4765..00000000
--- a/examples/context/theme-example.js
+++ /dev/null
@@ -1,55 +0,0 @@
-// Create a theme context, defaulting to light theme
-// highlight-next-line
-const ThemeContext = React.createContext('light');
-
-class ThemeProvider extends React.Component {
-  render() {
-    // highlight-range{2-4}
-    return (
-      <ThemeContext.Provider value={this.props.theme}>
-        {this.props.children}
-      </ThemeContext.Provider>
-    );
-  }
-}
-
-class ThemedButton extends React.Component {
-  render() {
-    //highlight-range{2-4}
-    return (
-      <ThemeContext.Consumer>
-        {theme => <Button theme={theme} />}
-      </ThemeContext.Consumer>
-    );
-  }
-}
-
-const SomeComponent = props => {
-  // The ThemedButton receives the theme from context;
-  // SomeComponent does not need to know about it
-  // highlight-range{3}
-  return (
-    <div>
-      <ThemedButton />
-    </div>
-  );
-};
-
-class App extends React.Component {
-  render() {
-    // The ThemedButton button inside the ThemeProvider
-    // uses the dark theme while the one outside uses the
-    // default light theme
-    // highlight-range{3-5,7}
-    return (
-      <div>
-        <ThemeProvider theme="dark">
-          <SomeComponent />
-        </ThemeProvider>
-        <div>
-          <ThemedButton />
-        </div>
-      </div>
-    );
-  }
-}

From 9f5499789a64236cd4fde161e06f9554452259a3 Mon Sep 17 00:00:00 2001
From: Alex Krolick <alexander.krolick@gmail.com>
Date: Thu, 22 Mar 2018 22:35:52 -0700
Subject: [PATCH 09/12] Update highlights

---
 examples/context/forwarding-refs.js     |  1 +
 examples/context/lifecycles.js          |  2 ++
 examples/context/motivation-solution.js | 16 +++++++++-------
 examples/context/multiple-contexts.js   |  5 ++++-
 4 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/examples/context/forwarding-refs.js b/examples/context/forwarding-refs.js
index e23ae77f..a0047d31 100644
--- a/examples/context/forwarding-refs.js
+++ b/examples/context/forwarding-refs.js
@@ -4,6 +4,7 @@ const Button = ({theme, children}) => (
   </button>
 );
 
+// highlight-range{1,3}
 export default React.forwardRef((props, ref) => (
   <ThemeContext.Consumer>
     {theme => <Button {...props} theme={theme} ref={ref} />}
diff --git a/examples/context/lifecycles.js b/examples/context/lifecycles.js
index 67c6f830..c03dbb5c 100644
--- a/examples/context/lifecycles.js
+++ b/examples/context/lifecycles.js
@@ -1,5 +1,6 @@
 class Button extends React.Component {
   componentDidMount() {
+    // highlight-next-line
     alert(this.props.theme);
   }
 
@@ -13,6 +14,7 @@ class Button extends React.Component {
   }
 }
 
+// highlight-range{3}
 export default props => (
   <ThemeContext.Consumer>
     {theme => <Button {...props} theme={theme} />}
diff --git a/examples/context/motivation-solution.js b/examples/context/motivation-solution.js
index d1922f6d..c3d62992 100644
--- a/examples/context/motivation-solution.js
+++ b/examples/context/motivation-solution.js
@@ -2,13 +2,15 @@
 // highlight-next-line
 const ThemeContext = React.createContext('light');
 
-// highlight-range{1,3-5}
-// The ThemedButton receives the theme from context
-const ThemedButton = props => (
-  <ThemeContext.Consumer>
-    {theme => <Button theme={theme} />}
-  </ThemeContext.Consumer>
-);
+const ThemedButton = props => {
+  // highlight-range{1,3-5}
+  // The ThemedButton receives the theme from context
+  return (
+    <ThemeContext.Consumer>
+      {theme => <Button theme={theme} />}
+    </ThemeContext.Consumer>
+  );
+};
 
 // An intermediate component
 const Toolbar = props => {
diff --git a/examples/context/multiple-contexts.js b/examples/context/multiple-contexts.js
index 48a9efe1..c8833d63 100644
--- a/examples/context/multiple-contexts.js
+++ b/examples/context/multiple-contexts.js
@@ -1,7 +1,9 @@
-// Create a theme context, defaulting to light theme
+// Theme context, default to light theme
+// highlight-next-line
 const ThemeContext = React.createContext('light');
 
 // Signed-in user context
+// highlight-next-line
 const UserContext = React.createContext();
 
 class App extends React.Component {
@@ -15,6 +17,7 @@ class App extends React.Component {
   };
 
   render() {
+    // highlight-range{9}
     return (
       <ThemeContext.Provider value={this.props.theme}>
         <UserContext.Provider

From 4e1282edac255e7b0958cd6c6f4d81b704a2bd8b Mon Sep 17 00:00:00 2001
From: Alex Krolick <alexander.krolick@gmail.com>
Date: Thu, 22 Mar 2018 22:36:16 -0700
Subject: [PATCH 10/12] Add to "when to use context"

---
 content/docs/context.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/content/docs/context.md b/content/docs/context.md
index 3d861a3e..f5bbfde4 100644
--- a/content/docs/context.md
+++ b/content/docs/context.md
@@ -32,7 +32,8 @@ Using context, we can avoid passing props through intermediate elements:
 
 `embed:context/motivation-solution.js`
 
-Note: Don't use context just to avoid passing props a few levels down.
+Note: Don't use context just to avoid passing props a few levels down. Stick to cases where the same data needs to accessed in many components at multiple levels.
+
 ## API
 
 ### `React.createContext`

From f588bd61e1b221efc152692eda047ce8bb3f0e34 Mon Sep 17 00:00:00 2001
From: Alex Krolick <alexander.krolick@gmail.com>
Date: Thu, 22 Mar 2018 22:38:37 -0700
Subject: [PATCH 11/12] Update "legacy" wording

---
 content/docs/context.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/content/docs/context.md b/content/docs/context.md
index f5bbfde4..1ab50264 100644
--- a/content/docs/context.md
+++ b/content/docs/context.md
@@ -101,7 +101,7 @@ A more complex example with dynamic values for the theme:
 
 ## Legacy API
 
-> The old context API was marked as legacy in React 16.3 and will be removed in version 17.
+> Note:
 > 
-> React previously shipped with an experimental context API. The old API will be supported in all 16.x releases, but applications using it should migrate to the new version. Read the [legacy context docs here](/docs/legacy-context.html).
+> React previously shipped with an experimental context API. The old API will be supported in all 16.x releases, but applications using it should migrate to the new version. The legacy API will be removed in React 17. Read the [legacy context docs here](/docs/legacy-context.html).
  
\ No newline at end of file

From ccc1f26b6072840109fe3c1058f916e721307eb1 Mon Sep 17 00:00:00 2001
From: Alex Krolick <alexander.krolick@gmail.com>
Date: Thu, 22 Mar 2018 22:41:30 -0700
Subject: [PATCH 12/12] Replace "deprecated" with "legacy" for now

---
 content/docs/legacy-context.md | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/content/docs/legacy-context.md b/content/docs/legacy-context.md
index 8da900b6..cff4d6a5 100644
--- a/content/docs/legacy-context.md
+++ b/content/docs/legacy-context.md
@@ -4,15 +4,15 @@ title: Legacy Context
 permalink: docs/legacy-context.html
 ---
 
-> Deprecation Warning
+> Note:
 >
-> The legacy API has been deprecated and will be removed in version 17.
+> The legacy context API will be removed in version 17.
 > Use the [new context API](/docs/context.html) introduced with version 16.3.
 > The legacy API will continue working for all 16.x releases.
 
 ## How To Use Context
 
-> This section documents a deprecated API. See the [new API](/docs/context.html).
+> This section documents a legacy API. See the [new API](/docs/context.html).
 
 Suppose you have a structure like:
 
@@ -107,7 +107,7 @@ If `contextTypes` is not defined, then `context` will be an empty object.
 
 ### Parent-Child Coupling
 
-> This section documents a deprecated API. See the [new API](/docs/context.html).
+> This section documents a legacy API. See the [new API](/docs/context.html).
 
 Context can also let you build an API where parents and children communicate. For example, one library that works this way is [React Router V4](https://reacttraining.com/react-router):
 
@@ -139,7 +139,7 @@ Before you build components with an API similar to this, consider if there are c
 
 ### Referencing Context in Lifecycle Methods
 
-> This section documents a deprecated API. See the [new API](/docs/context.html).
+> This section documents a legacy API. See the [new API](/docs/context.html).
 
 If `contextTypes` is defined within a component, the following [lifecycle methods](/docs/react-component.html#the-component-lifecycle) will receive an additional parameter, the `context` object:
 
@@ -154,7 +154,7 @@ If `contextTypes` is defined within a component, the following [lifecycle method
 
 ### Referencing Context in Stateless Functional Components
 
-> This section documents a deprecated API. See the [new API](/docs/context.html).
+> This section documents a legacy API. See the [new API](/docs/context.html).
 
 Stateless functional components are also able to reference `context` if `contextTypes` is defined as a property of the function. The following code shows a `Button` component written as a stateless functional component.
 
@@ -171,7 +171,7 @@ Button.contextTypes = {color: PropTypes.string};
 
 ### Updating Context
 
-> This section documents a deprecated API. See the [new API](/docs/context.html).
+> This section documents a legacy API. See the [new API](/docs/context.html).
 
 Don't do it.