From 9c213cd41c82861afcbeb7181c0ea83909127050 Mon Sep 17 00:00:00 2001
From: Anton Honcharuk <anton.goncharuk@icloud.com>
Date: Sun, 24 Feb 2019 13:28:34 +0200
Subject: [PATCH] [guide] [react] add more context about arrow functions, as
 props and in class fields

 Conflicts:
	react/README.md

 It looks like you may be committing a cherry-pick.
 If this is not correct, please remove the file
	.git/CHERRY_PICK_HEAD
 and try again.

 Please enter the commit message for your changes. Lines starting
 with '#' will be ignored, and an empty message aborts the commit.

 Author:    Anton Honcharuk <anton.goncharuk@icloud.com>
 Date:      Sun Feb 24 13:28:34 2019 +0200

 On branch eslint-config-airbnb-v18.2
 You are currently cherry-picking commit be07f7a.

 Changes to be committed:
	modified:   react/README.md
---
 react/README.md | 28 ++++++++++++++++++++++------
 1 file changed, 22 insertions(+), 6 deletions(-)

diff --git a/react/README.md b/react/README.md
index 5e830a02a2..d8e3413f49 100644
--- a/react/README.md
+++ b/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,7 +449,7 @@ 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>
@@ -457,7 +457,9 @@ eslint: [`react/prefer-es6-class`](https://github.com/yannickcr/eslint-plugin-re
     }
     ```
 
-  - 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 {