From f11a14941289de26c94b83816823577441e3929e Mon Sep 17 00:00:00 2001
From: Brian Vaughn <brian.david.vaughn@gmail.com>
Date: Sat, 24 Mar 2018 08:58:20 -0700
Subject: [PATCH] Added DevTools naming consideration to React.forwardRef
 reference doc example

---
 examples/reference-react-forward-ref.js | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/examples/reference-react-forward-ref.js b/examples/reference-react-forward-ref.js
index 59e8a23d..92cfbecc 100644
--- a/examples/reference-react-forward-ref.js
+++ b/examples/reference-react-forward-ref.js
@@ -1,4 +1,4 @@
-function enhance(WrappedComponent) {
+function enhance(Component) {
   class Enhanced extends React.Component {
     // ...
 
@@ -6,10 +6,8 @@ function enhance(WrappedComponent) {
       const {forwardedRef, ...rest} = this.props;
 
       // Assign the custom prop "forwardedRef" as a ref
-      // highlight-range{1-3}
-      return (
-        <WrappedComponent ref={forwardedRef} {...rest} />
-      );
+      // highlight-next-line
+      return <Component ref={forwardedRef} {...rest} />;
     }
   }
 
@@ -19,6 +17,12 @@ function enhance(WrappedComponent) {
     return <Enhanced {...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))"
+  const name = Component.displayName || Component.name;
+  enhanceForwardRef.displayName = `enhance(${name})`;
+
   // highlight-next-line
   return React.forwardRef(enhanceForwardRef);
 }