cherry pick [guide] [react] add more context about arrow functions be07f7a

react/README.md

@@ -440,7 +440,7 @@ eslint: [`react/prefer-es6-class`](https://github.com/yannickcr/eslint-plugin-re
 
 ## Metodos
 
-  - Use arrow functions.
+  - Use arrow functions to close over local variables. It is handy when you need to pass additional data to an event handler. Although, make sure they [do not massively hurt performance](https://www.bignerdranch.com/blog/choosing-the-best-approach-for-react-event-handlers/), in particular when passed to custom components that might be PureComponents, because they will trigger a possibly needless rerender every time.
 
     ```jsx
     function ItemList(props) {
@@ -449,15 +449,17 @@ eslint: [`react/prefer-es6-class`](https://github.com/yannickcr/eslint-plugin-re
           {props.items.map((item, index) => (
             <Item
               key={item.key}
-              onClick={() => doSomethingWith(item.name, index)}
+              onClick={(event) => doSomethingWith(event, item.name, index)}
             />
           ))}
         </ul>
       );
     }
     ```
 
-  - Bindear eventos por cada render method en el constructor. eslint: [`react/jsx-no-bind`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md)
+  - Bind event handlers for the render method in the constructor. eslint: [`react/jsx-no-bind`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md)
+
+    > Why? A bind call in the render path creates a brand new function on every single render. Do not use arrow functions in class fields, because it makes them [challenging to test and debug, and can negatively impact performance](https://medium.com/@charpeni/arrow-functions-in-class-properties-might-not-be-as-great-as-we-think-3b3551c440b1), and because conceptually, class fields are for data, not logic.
 
   > ¿Por qué? Una llamada de bind en render crea una función nueva en cada render.
 
@@ -468,10 +470,24 @@ eslint: [`react/prefer-es6-class`](https://github.com/yannickcr/eslint-plugin-re
       // do stuff
     }
 
-    render() {
-      return <div onClick={this.onClickDiv.bind(this)} />
+    // very bad
+    class extends React.Component {
+      onClickDiv = () => {
+        // do stuff
+      }
+
+      render() {
+        return <div onClick={this.onClickDiv} />
+      }
     }
-  }
+
+    // good
+    class extends React.Component {
+      constructor(props) {
+        super(props);
+
+        this.onClickDiv = this.onClickDiv.bind(this);
+      }
 
   // bien
   class extends React.Component {