Merge pull request #767 from koba04/customizing-display-name-ref-forwarding

Add a section "Customizing Name in DevTools" in Forwarding Refs

examples/forwarding-refs/customized-display-name.js

@@ -0,0 +1,17 @@
+function logProps(Component) {
+  class LogProps extends React.Component {
+    // ...
+  }
+
+  function forwardRef(props, ref) {
+    return <LogProps {...props} forwardedRef={ref} />;
+  }
+
+  // Give this component a more helpful 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);
+}

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

@@ -19,16 +19,7 @@ function logProps(Component) {
   // 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 forwardRef(props, ref) {
+  return React.forwardRef((props, ref) => {
     return <LogProps {...props} forwardedRef={ref} />;
-  }
-
-  // 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);
+  });
 }

examples/forwarding-refs/wrapped-component-with-function-name.js

@@ -0,0 +1,5 @@
+const WrappedComponent = React.forwardRef(
+  function myFunction(props, ref) {
+    return <LogProps {...props} forwardedRef={ref} />;
+  }
+);

examples/forwarding-refs/wrapped-component.js

@@ -0,0 +1,3 @@
+const WrappedComponent = React.forwardRef((props, ref) => {
+  return <LogProps {...props} forwardedRef={ref} />;
+});