Added DevTools name consideration to forwardRef examples

examples/16-3-release-blog-post/forward-ref-example.js

@@ -1,27 +1,27 @@
 function withTheme(Component) {
-  // highlight-next-line
-  function ThemedComponent({forwardedRef, ...rest}) {
-    // highlight-range{6}
+  // Note the second param "ref" provided by React.forwardRef.
+  // We can attach this to Component directly.
+  // highlight-range{1,5}
+  function ThemedComponent(props, ref) {
     return (
       <ThemeContext.Consumer>
         {theme => (
-          <Component
-            {...rest}
-            ref={forwardedRef}
-            theme={theme}
-          />
+          <Component {...props} ref={ref} theme={theme} />
         )}
       </ThemeContext.Consumer>
     );
   }
 
-  // Intercept the "ref" and pass it as a custom prop.
-  // highlight-range{1, 3}
-  return React.forwardRef(function forward(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;
+  ThemedComponent.displayName = `withTheme(${name})`;
+
+  // Tell React to pass the "ref" to ThemedComponent.
+  // highlight-next-line
+  return React.forwardRef(ThemedComponent);
 }
 
 // highlight-next-line

examples/forwarding-refs/log-props-after.js

@@ -1,4 +1,4 @@
-function logProps(WrappedComponent) {
+function logProps(Component) {
   class LogProps extends React.Component {
     componentDidUpdate(prevProps) {
       console.log('old props:', prevProps);
@@ -6,21 +6,29 @@ function logProps(WrappedComponent) {
     }
 
     render() {
+      // highlight-next-line
       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} />;
     }
   }
 
-  // Intercept the "ref" and pass it as a custom prop, e.g. "forwardedRef"
+  // Note the second param "ref" provided by React.forwardRef.
+  // We can pass it along to LogProps as a regular prop, e.g. "forwardedRef"
+  // And it can then be attached to the Component.
   // highlight-range{1-3}
-  function logPropsForwardRef(props, ref) {
+  function forwardRef(props, ref) {
     return <LogProps {...props} forwardedRef={ref} />;
   }
 
-  return React.forwardRef(logPropsForwardRef);
+  // These next lines are not necessary,
+  // But they do give the component a better display name in DevTools,
+  // e.g. "ForwardRef(logProps(MyComponent))"
+  // highlight-range{1-2}
+  const name = Component.displayName || Component.name;
+  forwardRef.displayName = `logProps(${name})`;
+
+  return React.forwardRef(forwardRef);
 }