Add guideline for displayName in higher-order components

lencioni · lencioni · commit 4c8f78921ff8 · 2016-07-26T16:51:08.000-07:00
This guideline will help us keep our higher-order components consistent and easy to understand. Fixes airbnb#968.
diff --git a/react/README.md b/react/README.md
@@ -101,7 +101,28 @@
     // good
     import Footer from './Footer';
     ```
+  - **Higher-order Component Naming**: Use a composite of the higher-order component's name and the passed-in component's name as the `displayName` on the generated component. For example, the higher-order component `withFoo()`, when passed a component `Bar` should produce a component with a `displayName` of `withFoo(Bar)`.
 
+  > Why? A component's `displayName` may be used by developer tools or in error messages, and having a value that clearly expresses this relationship helps people understand what is happening.
+
+    ```jsx
+    // bad
+    export default function withFoo(Component) {
+      return function WithFoo(props) {
+        return <Component {...props} foo />;
+      }
+    }
+
+    // good
+    export default function withFoo(Component) {
+      function WithFoo(props) {
+        return <Component {...props} foo />;
+      }
+
+      WithFoo.displayName = `withFoo(${Component.displayName || Component.name}`;
+      return WithFoo;
+    }
+    ```
 ## Declaration
 
   - Do not use `displayName` for naming components. Instead, name the component by reference.
