From 6e12b4bd931796ef85e6e82a76e55f764a06b3b3 Mon Sep 17 00:00:00 2001
From: Agata Talita <63733780+agatatalitatest@users.noreply.github.com>
Date: Wed, 8 Dec 2021 02:36:01 +0100
Subject: [PATCH 01/13] Change setState to use function with prev state

To have an example that reminds about best practices.
https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous
---
 content/docs/hooks-intro.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/hooks-intro.md b/content/docs/hooks-intro.md
index ded29158745..715d0df45f6 100644
--- a/content/docs/hooks-intro.md
+++ b/content/docs/hooks-intro.md
@@ -17,7 +17,7 @@ function Example() {
   return (
     <div>
       <p>You clicked {count} times</p>
-      <button onClick={() => setCount(count + 1)}>
+      <button onClick={(previousCout) => setCount(previousCout + 1)}>
         Click me
       </button>
     </div>

From d5d57ac5f3203f66b8df952bab784b7a1cbe0f6c Mon Sep 17 00:00:00 2001
From: Agata Talita <63733780+agatatalitatest@users.noreply.github.com>
Date: Wed, 8 Dec 2021 02:45:30 +0100
Subject: [PATCH 02/13] Change setState to use function with prev state

To have an example that reminds about best practices.
https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous
---
 content/docs/hooks-intro.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/hooks-intro.md b/content/docs/hooks-intro.md
index 715d0df45f6..ab04120a0f9 100644
--- a/content/docs/hooks-intro.md
+++ b/content/docs/hooks-intro.md
@@ -17,7 +17,7 @@ function Example() {
   return (
     <div>
       <p>You clicked {count} times</p>
-      <button onClick={(previousCout) => setCount(previousCout + 1)}>
+      <button onClick={(previousCount) => setCount(previousCount + 1)}>
         Click me
       </button>
     </div>

From 2d8144931ed7d26a1fc42b44f32f45d3d3a06bf4 Mon Sep 17 00:00:00 2001
From: Agata Talita <63733780+agatatalitatest@users.noreply.github.com>
Date: Wed, 8 Dec 2021 02:45:53 +0100
Subject: [PATCH 03/13] Change setState to use function with prev state

To have an example that reminds about best practices.
https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous
---
 content/docs/hooks-overview.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/content/docs/hooks-overview.md b/content/docs/hooks-overview.md
index d299a8b6d95..021bac3fe1c 100644
--- a/content/docs/hooks-overview.md
+++ b/content/docs/hooks-overview.md
@@ -30,7 +30,7 @@ function Example() {
   return (
     <div>
       <p>You clicked {count} times</p>
-      <button onClick={() => setCount(count + 1)}>
+      <button onClick={(previousCount) => setCount(previousCount + 1)}}>
         Click me
       </button>
     </div>
@@ -91,7 +91,7 @@ function Example() {
   return (
     <div>
       <p>You clicked {count} times</p>
-      <button onClick={() => setCount(count + 1)}>
+      <button onClick={(previousCount) => setCount(previousCount + 1)}}>
         Click me
       </button>
     </div>

From 5231e5714d644ffc331e41534e7f2c33055028f5 Mon Sep 17 00:00:00 2001
From: Agata Talita <63733780+agatatalitatest@users.noreply.github.com>
Date: Wed, 8 Dec 2021 02:56:08 +0100
Subject: [PATCH 04/13] Change setState to use function with prev state

To have an example that reminds about best practices.
https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous
---
 content/docs/hooks-intro.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/hooks-intro.md b/content/docs/hooks-intro.md
index ab04120a0f9..987696bed49 100644
--- a/content/docs/hooks-intro.md
+++ b/content/docs/hooks-intro.md
@@ -17,7 +17,7 @@ function Example() {
   return (
     <div>
       <p>You clicked {count} times</p>
-      <button onClick={(previousCount) => setCount(previousCount + 1)}>
+      <button onClick={() => setCount(previousCount => previousCount + 1)}>
         Click me
       </button>
     </div>

From f94cce1a28ba98636d97f6552bc680e5f1d48314 Mon Sep 17 00:00:00 2001
From: Agata Talita <63733780+agatatalitatest@users.noreply.github.com>
Date: Wed, 8 Dec 2021 03:08:08 +0100
Subject: [PATCH 05/13] Change setState to use function with prev state

To have an example that reminds about best practices.
https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous
---
 content/docs/hooks-effect.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/content/docs/hooks-effect.md b/content/docs/hooks-effect.md
index 86b3b6649b0..dc7178c1a84 100644
--- a/content/docs/hooks-effect.md
+++ b/content/docs/hooks-effect.md
@@ -25,7 +25,7 @@ function Example() {
   return (
     <div>
       <p>You clicked {count} times</p>
-      <button onClick={() => setCount(count + 1)}>
+      <button onClick={() => setCount(previousCount => previousCount + 1)}>
         Click me
       </button>
     </div>
@@ -74,7 +74,7 @@ class Example extends React.Component {
     return (
       <div>
         <p>You clicked {this.state.count} times</p>
-        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
+        <button onClick={() => this.setState(previousState => { count: previousState.count + 1 })}>
           Click me
         </button>
       </div>
@@ -106,7 +106,7 @@ function Example() {
   return (
     <div>
       <p>You clicked {count} times</p>
-      <button onClick={() => setCount(count + 1)}>
+      <button onClick={() => setCount(previousCount => previousCount + 1)}>
         Click me
       </button>
     </div>

From a892c58403efcb0958e39f71b5cf3796dc7ad205 Mon Sep 17 00:00:00 2001
From: Agata Talita <63733780+agatatalitatest@users.noreply.github.com>
Date: Wed, 8 Dec 2021 03:12:46 +0100
Subject: [PATCH 06/13] Change setState to use function with prev state

---
 content/docs/hooks-intro.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/hooks-intro.md b/content/docs/hooks-intro.md
index 987696bed49..8607a1e996e 100644
--- a/content/docs/hooks-intro.md
+++ b/content/docs/hooks-intro.md
@@ -17,7 +17,7 @@ function Example() {
   return (
     <div>
       <p>You clicked {count} times</p>
-      <button onClick={() => setCount(previousCount => previousCount + 1)}>
+      <button onClick={() => setCount(prevCount => prevCount + 1)}>
         Click me
       </button>
     </div>

From 76f8f2e0f0475c3ee780985d1935c3973d90a2b9 Mon Sep 17 00:00:00 2001
From: Agata Talita <63733780+agatatalitatest@users.noreply.github.com>
Date: Wed, 8 Dec 2021 03:16:01 +0100
Subject: [PATCH 07/13] Update hooks-overview.md

---
 content/docs/hooks-overview.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/content/docs/hooks-overview.md b/content/docs/hooks-overview.md
index 021bac3fe1c..c23cae61791 100644
--- a/content/docs/hooks-overview.md
+++ b/content/docs/hooks-overview.md
@@ -30,7 +30,7 @@ function Example() {
   return (
     <div>
       <p>You clicked {count} times</p>
-      <button onClick={(previousCount) => setCount(previousCount + 1)}}>
+      <button onClick={() => setCount(prevCount => prevCount + 1)}}>
         Click me
       </button>
     </div>
@@ -91,7 +91,7 @@ function Example() {
   return (
     <div>
       <p>You clicked {count} times</p>
-      <button onClick={(previousCount) => setCount(previousCount + 1)}}>
+      <button onClick={() => setCount(prevCount => prevCount + 1)}}>
         Click me
       </button>
     </div>

From b4aba9deaa9c2e51b5ed31ad3645437ef7abf994 Mon Sep 17 00:00:00 2001
From: Agata Talita <63733780+agatatalitatest@users.noreply.github.com>
Date: Wed, 8 Dec 2021 03:18:21 +0100
Subject: [PATCH 08/13] Update hooks-state.md

---
 content/docs/hooks-state.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/content/docs/hooks-state.md b/content/docs/hooks-state.md
index 0b4d15b65e7..56937a5526f 100644
--- a/content/docs/hooks-state.md
+++ b/content/docs/hooks-state.md
@@ -20,7 +20,7 @@ function Example() {
   return (
     <div>
       <p>You clicked {count} times</p>
-      <button onClick={() => setCount(count + 1)}>
+      <button onClick={() => setCount(prevCount => prevCount + 1)}>
         Click me
       </button>
     </div>
@@ -182,7 +182,7 @@ In a class, we need to call `this.setState()` to update the `count` state:
 In a function, we already have `setCount` and `count` as variables so we don't need `this`:
 
 ```js{1}
-  <button onClick={() => setCount(count + 1)}>
+  <button onClick={() => setCount(prevCount => prevCount + 1)}>
     Click me
   </button>
 ```
@@ -204,7 +204,7 @@ Let's now **recap what we learned line by line** and check our understanding.
  6:    return (
  7:      <div>
  8:        <p>You clicked {count} times</p>
- 9:        <button onClick={() => setCount(count + 1)}>
+ 9:        <button onClick={() => setCount(prevCount => prevCount + 1)}>
 10:         Click me
 11:        </button>
 12:      </div>

From 8a3cf59e3e714c6f6cce999c2b2609b9df998dff Mon Sep 17 00:00:00 2001
From: Agata Talita <63733780+agatatalitatest@users.noreply.github.com>
Date: Wed, 8 Dec 2021 03:20:04 +0100
Subject: [PATCH 09/13] Update hooks-effect.md

---
 content/docs/hooks-effect.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/content/docs/hooks-effect.md b/content/docs/hooks-effect.md
index dc7178c1a84..311b60867e4 100644
--- a/content/docs/hooks-effect.md
+++ b/content/docs/hooks-effect.md
@@ -25,7 +25,7 @@ function Example() {
   return (
     <div>
       <p>You clicked {count} times</p>
-      <button onClick={() => setCount(previousCount => previousCount + 1)}>
+      <button onClick={() => setCount(prevCount => prevCount + 1)}>
         Click me
       </button>
     </div>
@@ -74,7 +74,7 @@ class Example extends React.Component {
     return (
       <div>
         <p>You clicked {this.state.count} times</p>
-        <button onClick={() => this.setState(previousState => { count: previousState.count + 1 })}>
+        <button onClick={() => this.setState(prevState => { count: prevState.count + 1 })}>
           Click me
         </button>
       </div>
@@ -106,7 +106,7 @@ function Example() {
   return (
     <div>
       <p>You clicked {count} times</p>
-      <button onClick={() => setCount(previousCount => previousCount + 1)}>
+      <button onClick={() => setCount(prevCount => prevCount + 1)}>
         Click me
       </button>
     </div>

From a4f92e6c3d629c27c452763761966f8af4c2ae67 Mon Sep 17 00:00:00 2001
From: Agata Talita <63733780+agatatalitatest@users.noreply.github.com>
Date: Wed, 8 Dec 2021 03:21:39 +0100
Subject: [PATCH 10/13] Update hooks-state.md

---
 content/docs/hooks-state.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/content/docs/hooks-state.md b/content/docs/hooks-state.md
index 56937a5526f..2f13c917d6c 100644
--- a/content/docs/hooks-state.md
+++ b/content/docs/hooks-state.md
@@ -47,7 +47,7 @@ class Example extends React.Component {
     return (
       <div>
         <p>You clicked {this.state.count} times</p>
-        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
+        <button onClick={() => this.setState(prevState => { count: prevState.count + 1 })}>
           Click me
         </button>
       </div>
@@ -174,7 +174,7 @@ In a function, we can use `count` directly:
 In a class, we need to call `this.setState()` to update the `count` state:
 
 ```js{1}
-  <button onClick={() => this.setState({ count: this.state.count + 1 })}>
+  <button onClick={() => this.setState(prevState => { count: prevState.count + 1 })}>
     Click me
   </button>
 ```

From ea0185ff6848d671fbcd4edafc7744729ce78231 Mon Sep 17 00:00:00 2001
From: Agata Talita <63733780+agatatalitatest@users.noreply.github.com>
Date: Wed, 8 Dec 2021 03:28:57 +0100
Subject: [PATCH 11/13] Update hooks-faq.md

---
 content/docs/hooks-faq.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/content/docs/hooks-faq.md b/content/docs/hooks-faq.md
index 99473c7351f..204ed469ba3 100644
--- a/content/docs/hooks-faq.md
+++ b/content/docs/hooks-faq.md
@@ -138,7 +138,7 @@ function Example() {
   return (
     <div>
       <p>You clicked {count} times</p>
-      <button onClick={() => setCount(count + 1)}>
+      <button onClick={() => setCount(prevCount => prevCount + 1)}>
         Click me
       </button>
     </div>
@@ -399,7 +399,7 @@ function Example() {
   return (
     <div>
       <p>You clicked {count} times</p>
-      <button onClick={() => setCount(count + 1)}>
+      <button onClick={() => setCount(prevCount => prevCount + 1)}>
         Click me
       </button>
       <button onClick={handleAlertClick}>

From 9509f2173bc2510f36d2a6b72ea6d94df3c31c52 Mon Sep 17 00:00:00 2001
From: Agata Talita <63733780+agatatalitatest@users.noreply.github.com>
Date: Wed, 8 Dec 2021 03:43:07 +0100
Subject: [PATCH 12/13] Update hooks-overview.md

---
 content/docs/hooks-overview.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/content/docs/hooks-overview.md b/content/docs/hooks-overview.md
index c23cae61791..9873d352538 100644
--- a/content/docs/hooks-overview.md
+++ b/content/docs/hooks-overview.md
@@ -42,6 +42,9 @@ Here, `useState` is a *Hook* (we'll talk about what this means in a moment). We
 
 The only argument to `useState` is the initial state. In the example above, it is `0` because our counter starts from zero. Note that unlike `this.state`, the state here doesn't have to be an object -- although it can be if you want. The initial state argument is only used during the first render.
 
+If you are wondering why we are passing a function to setCount, read more about [functional updates](//docs/hooks-reference.html#functional-updates) or [general good practices with updating component state](https://reactjs.org/docs/hooks-reference.html#functional-updates).
+In short, we can pass value or [special function](https://reactjs.org/docs/hooks-reference.html#functional-updates) that takes a previous state value and returns the value we want to set with `setCount` function.
+
 #### Declaring multiple state variables {#declaring-multiple-state-variables}
 
 You can use the State Hook more than once in a single component:

From 03160c0e8e6b4e5d712eea1e83ee5b8d538f5efa Mon Sep 17 00:00:00 2001
From: Agata Talita <63733780+agatatalitatest@users.noreply.github.com>
Date: Wed, 8 Dec 2021 03:46:23 +0100
Subject: [PATCH 13/13] Update hooks-overview.md

---
 content/docs/hooks-overview.md | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/content/docs/hooks-overview.md b/content/docs/hooks-overview.md
index 9873d352538..699ef034d60 100644
--- a/content/docs/hooks-overview.md
+++ b/content/docs/hooks-overview.md
@@ -42,8 +42,9 @@ Here, `useState` is a *Hook* (we'll talk about what this means in a moment). We
 
 The only argument to `useState` is the initial state. In the example above, it is `0` because our counter starts from zero. Note that unlike `this.state`, the state here doesn't have to be an object -- although it can be if you want. The initial state argument is only used during the first render.
 
-If you are wondering why we are passing a function to setCount, read more about [functional updates](//docs/hooks-reference.html#functional-updates) or [general good practices with updating component state](https://reactjs.org/docs/hooks-reference.html#functional-updates).
-In short, we can pass value or [special function](https://reactjs.org/docs/hooks-reference.html#functional-updates) that takes a previous state value and returns the value we want to set with `setCount` function.
+>
+> If you are wondering why we are passing a function to `setCount`, read more about [functional updates](//docs/hooks-reference.html#functional-updates) or [general good practices with updating component state](https://reactjs.org/docs/hooks-reference.html#functional-updates).
+>In short, we can pass value or [special function](https://reactjs.org/docs/hooks-reference.html#functional-updates) that takes a previous state value and returns a new value we want to store in `count`.
 
 #### Declaring multiple state variables {#declaring-multiple-state-variables}