From da15481650b9f88b99934e9fd87f9177f5ea86a8 Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Mon, 10 Jan 2022 13:45:02 -1000
Subject: [PATCH 1/3] Add guidance on method binding for class components

---
 STYLE.md | 42 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 42 insertions(+)

diff --git a/STYLE.md b/STYLE.md
index 7a9fe40deed97..8c3abad3c4d81 100644
--- a/STYLE.md
+++ b/STYLE.md
@@ -511,6 +511,48 @@ const propTypes = {
 }
 ```
 
+## Binding methods
+
+For class components, methods should be bound if be passed directly a prop or needing to be accessed via the component instance from outside of the component's execution context. Do not simply bind all methods in the constructor without reason. Learn and understand how `this` works [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this).
+
+```javascript
+// Bad
+class SomeComponent {
+    constructor(props) {
+        super(props);
+
+        this.myMethod = this.myMethod.bind();
+    }
+
+    myMethod() {...}
+
+    render() {
+        return (
+            // No need to bind this since arrow function is used
+            <Button onPress={() => this.myMethod()} />
+        );
+    }
+}
+
+// Good
+class SomeComponent {
+    constructor(props) {
+        super(props);
+
+        this.myMethod = this.myMethod.bind();
+    }
+
+    myMethod() {...}
+
+    render() {
+        return (
+            // Passed directly to Button so this should be bound to the component
+            <Button onPress={this.myMethod} />
+        );
+    }
+}
+```
+
 ## Inline Ternarys
 * Use inline ternary statements when rendering optional pieces of templates. Notice the white space and formatting of the ternary.
 

From f0c887917aabc46b207bf96fd59a9a0db34fec58 Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Mon, 10 Jan 2022 13:46:42 -1000
Subject: [PATCH 2/3] add this

---
 STYLE.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/STYLE.md b/STYLE.md
index 8c3abad3c4d81..5c84f40be0cc6 100644
--- a/STYLE.md
+++ b/STYLE.md
@@ -521,7 +521,7 @@ class SomeComponent {
     constructor(props) {
         super(props);
 
-        this.myMethod = this.myMethod.bind();
+        this.myMethod = this.myMethod.bind(this);
     }
 
     myMethod() {...}
@@ -539,7 +539,7 @@ class SomeComponent {
     constructor(props) {
         super(props);
 
-        this.myMethod = this.myMethod.bind();
+        this.myMethod = this.myMethod.bind(this);
     }
 
     myMethod() {...}

From 01f6b2b3c9efc726166abf2e1481d160609176b1 Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Mon, 10 Jan 2022 13:48:03 -1000
Subject: [PATCH 3/3] be nicer

---
 STYLE.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/STYLE.md b/STYLE.md
index 5c84f40be0cc6..d8a5616a174b4 100644
--- a/STYLE.md
+++ b/STYLE.md
@@ -513,7 +513,7 @@ const propTypes = {
 
 ## Binding methods
 
-For class components, methods should be bound if be passed directly a prop or needing to be accessed via the component instance from outside of the component's execution context. Do not simply bind all methods in the constructor without reason. Learn and understand how `this` works [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this).
+For class components, methods should be bound in the `constructor()` if passed directly as a prop or needing to be accessed via the component instance from outside of the component's execution context. Binding all methods in the constructor is unnecessary. Learn and understand how `this` works [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this).
 
 ```javascript
 // Bad