From d5c449d824c99ece8e74046ad651d540690fcd60 Mon Sep 17 00:00:00 2001
From: Toru Kobayashi <koba0004@gmail.com>
Date: Fri, 30 Mar 2018 14:14:29 +0900
Subject: [PATCH 1/4] React.forwardRef accepts a render function, not
 Functional Component

---
 .../forward-ref-example.js                    | 27 +++++++++----------
 1 file changed, 12 insertions(+), 15 deletions(-)

diff --git a/examples/16-3-release-blog-post/forward-ref-example.js b/examples/16-3-release-blog-post/forward-ref-example.js
index af6bb9f4b..f1295a71e 100644
--- a/examples/16-3-release-blog-post/forward-ref-example.js
+++ b/examples/16-3-release-blog-post/forward-ref-example.js
@@ -1,27 +1,24 @@
 function withTheme(Component) {
-  // Note the second param "ref" provided by React.forwardRef.
-  // We can attach this to Component directly.
-  // highlight-range{1,5}
-  function ThemedComponent(props, ref) {
+  // highlight-next-line
+  function ThemedComponent({forwardedRef, ...rest}) {
     return (
       <ThemeContext.Consumer>
         {theme => (
-          <Component {...props} ref={ref} theme={theme} />
+          // Assign the custom prop "forwardedRef" as a ref
+          // highlight-next-line
+          <Component {...rest} ref={forwardedRef} theme={theme} />
         )}
       </ThemeContext.Consumer>
     );
   }
 
-  // These next lines are not necessary,
-  // But they do give the component a better display name in DevTools,
-  // e.g. "ForwardRef(withTheme(MyComponent))"
-  // highlight-range{1-2}
-  const name = Component.displayName || Component.name;
-  ThemedComponent.displayName = `withTheme(${name})`;
-
-  // Tell React to pass the "ref" to ThemedComponent.
-  // highlight-next-line
-  return React.forwardRef(ThemedComponent);
+  // Note the second param "ref" provided by React.forwardRef.
+  // We can pass it along to ThemedComponent as a regular prop, e.g. "forwardedRef"
+  // And it can then be attached to the Component.
+  // highlight-range{1-3}
+  return React.forwardRef((props, ref) => (
+    <ThemedComponent {...props} forwardedRef={ref} />
+  ));
 }
 
 // highlight-next-line

From c72935a05414c6eea4bb508c17ed845068c3458e Mon Sep 17 00:00:00 2001
From: Toru Kobayashi <koba0004@gmail.com>
Date: Fri, 30 Mar 2018 15:25:16 +0900
Subject: [PATCH 2/4] prettier

---
 examples/16-3-release-blog-post/forward-ref-example.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/examples/16-3-release-blog-post/forward-ref-example.js b/examples/16-3-release-blog-post/forward-ref-example.js
index f1295a71e..e2ed14314 100644
--- a/examples/16-3-release-blog-post/forward-ref-example.js
+++ b/examples/16-3-release-blog-post/forward-ref-example.js
@@ -6,7 +6,11 @@ function withTheme(Component) {
         {theme => (
           // Assign the custom prop "forwardedRef" as a ref
           // highlight-next-line
-          <Component {...rest} ref={forwardedRef} theme={theme} />
+          <Component
+            {...rest}
+            ref={forwardedRef}
+            theme={theme}
+          />
         )}
       </ThemeContext.Consumer>
     );

From 2e1554dc32961f1458a7f89b9b70bc2f8dd3040a Mon Sep 17 00:00:00 2001
From: Toru Kobayashi <koba0004@gmail.com>
Date: Tue, 3 Apr 2018 02:02:21 +0900
Subject: [PATCH 3/4] Adopt bvaughn's example

---
 .../forward-ref-example.js                     | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/examples/16-3-release-blog-post/forward-ref-example.js b/examples/16-3-release-blog-post/forward-ref-example.js
index e2ed14314..8b9bbbb7b 100644
--- a/examples/16-3-release-blog-post/forward-ref-example.js
+++ b/examples/16-3-release-blog-post/forward-ref-example.js
@@ -20,9 +20,21 @@ function withTheme(Component) {
   // We can pass it along to ThemedComponent as a regular prop, e.g. "forwardedRef"
   // And it can then be attached to the Component.
   // highlight-range{1-3}
-  return React.forwardRef((props, ref) => (
-    <ThemedComponent {...props} forwardedRef={ref} />
-  ));
+  function refForwarder(props, ref) {
+    return (
+      <ThemedComponent {...props} forwardedRef={ref} />
+    );
+  }
+
+  // These next lines are not necessary,
+  // But they do give the component a better display name in DevTools,
+  // e.g. "ForwardRef(withTheme(MyComponent))"
+  // highlight-range{1-2}
+  const name = Component.displayName || Component.name;
+  refForwarder.displayName = `withTheme(${name})`;
+
+  // highlight-next-line
+  return React.forwardRef(refForwarder);
 }
 
 // highlight-next-line

From 0ea7d991271dc7a5c6d0a5e1e83d51ed736b7831 Mon Sep 17 00:00:00 2001
From: Toru Kobayashi <koba0004@gmail.com>
Date: Tue, 3 Apr 2018 02:36:43 +0900
Subject: [PATCH 4/4] Revert "Adopt bvaughn's example"

This reverts commit 2e1554dc32961f1458a7f89b9b70bc2f8dd3040a.
---
 .../forward-ref-example.js                     | 18 +++---------------
 1 file changed, 3 insertions(+), 15 deletions(-)

diff --git a/examples/16-3-release-blog-post/forward-ref-example.js b/examples/16-3-release-blog-post/forward-ref-example.js
index 8b9bbbb7b..e2ed14314 100644
--- a/examples/16-3-release-blog-post/forward-ref-example.js
+++ b/examples/16-3-release-blog-post/forward-ref-example.js
@@ -20,21 +20,9 @@ function withTheme(Component) {
   // We can pass it along to ThemedComponent as a regular prop, e.g. "forwardedRef"
   // And it can then be attached to the Component.
   // highlight-range{1-3}
-  function refForwarder(props, ref) {
-    return (
-      <ThemedComponent {...props} forwardedRef={ref} />
-    );
-  }
-
-  // These next lines are not necessary,
-  // But they do give the component a better display name in DevTools,
-  // e.g. "ForwardRef(withTheme(MyComponent))"
-  // highlight-range{1-2}
-  const name = Component.displayName || Component.name;
-  refForwarder.displayName = `withTheme(${name})`;
-
-  // highlight-next-line
-  return React.forwardRef(refForwarder);
+  return React.forwardRef((props, ref) => (
+    <ThemedComponent {...props} forwardedRef={ref} />
+  ));
 }
 
 // highlight-next-line