Added DevTools naming consideration to React.forwardRef reference doc example

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);
 }