From e143823d7a34f8ee9c20fa0dbe53fed074a85dbb Mon Sep 17 00:00:00 2001
From: Brian Vaughn <brian.david.vaughn@gmail.com>
Date: Sat, 24 Mar 2018 16:26:04 -0700
Subject: [PATCH] Added create-subscription example

---
 .../2018-03-15-update-on-async-rendering.md   | 10 ++++--
 ...ing-event-listeners-create-subscription.js | 33 +++++++++++++++++++
 2 files changed, 41 insertions(+), 2 deletions(-)
 create mode 100644 examples/update-on-async-rendering/adding-event-listeners-create-subscription.js

diff --git a/content/blog/2018-03-15-update-on-async-rendering.md b/content/blog/2018-03-15-update-on-async-rendering.md
index 18e3a6339..e2fe9cf32 100644
--- a/content/blog/2018-03-15-update-on-async-rendering.md
+++ b/content/blog/2018-03-15-update-on-async-rendering.md
@@ -106,9 +106,15 @@ For this reason, the recommended way to add listeners/subscriptions is to use th
 >
 > Although the pattern above is slightly more verbose, it has an added benefit of deferring the subscription creation until after the component has rendered, reducing the amount of time in the critical render path. In the near future, React may include more tools to reduce code complexity for data fetching cases like this.
 
+Sometimes it is important to update subscriptions in response to property changes. If you're using a library like Redux or MobX, the library's container component should handle this for you. For application authors, we've created a small library, [`create-subscription`](https://github.com/facebook/react/tree/master/packages/create-subscription), to help with this.
+
+Rather than passing a subscribable `dataSource` prop as we did in the example above, we could use `create-subscription` to pass in the subscribed value:
+
+`embed:update-on-async-rendering/adding-event-listeners-create-subscription.js`
+
 > Note
->
-> Sometimes it is important to update subscriptions in response to property changes. If you're using a library like Redux or MobX, the library's container component should handle this for you. If you're authoring such a library, we suggest using a technique like [the one shown here](https://gist.github.com/bvaughn/d569177d70b50b58bff69c3c4a5353f3).
+> 
+> Libraries like Relay/Apollo should manage subscriptions manually with the same techniques as `create-subscription` uses under the hood (as referenced [here](https://gist.github.com/bvaughn/d569177d70b50b58bff69c3c4a5353f3)) in a way that is most optimized for their library usage.
 
 ### Updating `state` based on `props`
 
diff --git a/examples/update-on-async-rendering/adding-event-listeners-create-subscription.js b/examples/update-on-async-rendering/adding-event-listeners-create-subscription.js
new file mode 100644
index 000000000..9b096070a
--- /dev/null
+++ b/examples/update-on-async-rendering/adding-event-listeners-create-subscription.js
@@ -0,0 +1,33 @@
+import {createSubscription} from 'create-subscription';
+
+const Subscription = createSubscription({
+  getCurrentValue(source) {
+    // Return the current value of the subscription (source).
+    // highlight-next-line
+    return source.value;
+  },
+
+  subscribe(source, callback) {
+    function handleSubscriptionChange() {
+      callback(dataSource.value);
+    }
+
+    // Subscribe (e.g. add an event listener) to the subscription (source).
+    // Call callback(newValue) whenever a subscription changes.
+    // highlight-next-line
+    source.subscribe(handleSubscriptionChange);
+
+    // Return an unsubscribe method.
+    // highlight-range{1-3}
+    return function unsubscribe() {
+      source.unsubscribe(handleSubscriptionChange);
+    };
+  },
+});
+
+// Rather than passing the subscribable source to our ExampleComponent,
+// We could just pass the subscribed value directly:
+// highlight-range{1-3}
+<Subscription source={dataSource}>
+  {value => <ExampleComponent subscribedValue={value} />}
+</Subscription>;