Update hooks documentation to include functional updates.

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(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({ count: this.state.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(count + 1)}>
+      <button onClick={() => setCount(prevCount => prevCount + 1)}>
         Click me
       </button>
     </div>

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}>

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={() => setCount(prevCount => prevCount + 1)}>
         Click me
       </button>
     </div>

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={() => setCount(prevCount => prevCount + 1)}}>
         Click me
       </button>
     </div>
@@ -42,6 +42,10 @@ 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 a new value we want to store in `count`.
+
 #### Declaring multiple state variables {#declaring-multiple-state-variables}
 
 You can use the State Hook more than once in a single component:
@@ -91,7 +95,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>

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>
@@ -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,15 +174,15 @@ 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>
 ```
 
 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>