## Terms

In the syntax

```tsx
const [state, setState] = useState(0);
```

I will call variable in `state` position as **state variable <name_of_variable>** (for example, the state variable `count`)

I will call function in `setState` position as **state-update function <name_of_function>** (for example, the state-update function `setCount`)

I will call value in `0` position as **initial value of state <name_of_state>** (for example, the initial value of state `count`)

## When does React batch state?

Let take a look at the code below

```tsx
const App = () => {
  const [a, setA] = useState(0);
  const [b, setB] = useState("hello");

  useEffect(() => {
    console.log("State change");
  });

  const handleClick = () => {
    setA(a + 1);
    setB(b + "new hello");
  };

  return (
    <div>
      {a} --- {b}
      <button onClick={handleClick}>Change state</button>
    </div>
  );
};
```

When we click on the button, the state variable `a` and `b` will be updated, but the component only re-render **ONE**. This is because React batches both state-update functions in `handleClick` into one "batch" and after React know for sure that there is no more state-update function it needs to run, it will execute those batched state-update functions.

---> This help us update the states all at once, which in turn re-render component only one time. This is a good thing for performance.

However, React doesn't always batch state. Several situations that can prevent this from happening. For example, if we do something asynchronous and then want to update state, chance is that React won't batch those states and instead, run each of them individually. Let take a look at one example

```tsx
const App = () => {
  const [a, setA] = useState(0);
  const [b, setB] = useState("hello");

  useEffect(() => {
    console.log("State change");
  });

  const handleClick = async () => {
    const data = await fetch("some url");
    setA(a + 1);
    setB(b + "new hello");
  };

  return (
    <div>
      {a} --- {b}
      <button onClick={handleClick}>Change state</button>
    </div>
  );
};
```

If we click on the button now, we see that the log message is printed twice, which indicates that the component has been re-rendered **TWICE**. This can be interpreted as that each of the state-update function has been executed individually.

Here is what happen in order:

1. Button is clicked and the event handler `handleClick` is called
2. Data is fetched
3. `setA` is called and **executed** which update state variable `a`
4. The component re-render
5. The callback of `useEffect` is put on queue and scheduled to run
6. `setB` is called and **executed** which update state variable `b`
7. The component re-render
8. The callback of `useEffect` is put on queue and scheduled to run
9. The callbacks function we put on queue from before is executed and print out 2 log messages

This is unexpected and may potentially cause bugs.

This behavior also happens in other form of asynchronous action. Some examples:

```tsx
setTimeout(() => {
  setCount((c) => c + 1);
  setFlag((f) => !f);
  // React will re-render twice
}, 1000);
```

Or

```tsx
fetch(/*...*/).then(() => {
  setCount((c) => c + 1);
  setFlag((f) => !f);
  // React will re-render twice
});
```

Or

```tsx
elm.addEventListener("click", () => {
  setCount((c) => c + 1);
  setFlag((f) => !f);
  // React will re-render twice
});
```

## How to fix this problem?

Currently on React 17 and older there is no fix for this. However, in React 18 this problem will be addressed.

## Reference

- [React 18 discussion on batching](https://github.com/reactwg/react-18/discussions/21)
- [Does React batch state update functions when using hooks?](https://stackoverflow.com/questions/53048495/does-react-batch-state-update-functions-when-using-hooks)


We learned before that React states sometimes get batched together into one single state update instead of individual update. But some other times this is not the case.

When does React batch state

## Terms

In the syntax

```tsx
const [state, setState] = useState(0);
```

I will call variable in `state` position as **state variable <name_of_variable>** (for example, the state variable `count`)

I will call function in `setState` position as **state-update function <name_of_function>** (for example, the state-update function `setCount`)

I will call value in `0` position as **initial value of state <name_of_state>** (for example, the initial value of state `count`)

## What is state batching

State batching is a React behavior where multiple state-update functions are batched together and run all at once instead of run one by one. Let's take a look at the code below

```tsx
const App = () => {
  const [a, setA] = useState(0);
  const [b, setB] = useState("hello");

  useEffect(() => {
    console.log("State change");
  });

  const handleClick = () => {
    setA(a + 1);
    setB(b + "new hello");
  };

  return (
    <div>
      {a} --- {b}
      <button onClick={handleClick}>Change state</button>
    </div>
  );
};
```

Try to run the code above and click on the button. Can you guess how many time you will see the message `State change` in the console?

The answer is **1 log message per button click**. When I first learned React I did the wrong guess, which is 2 log messages per button click. Our guess of 2 logs is wrong. But why is it? Let analyze why we came up with such guess and what actually happened.

---

This is what will happen according to our _expectation_:

- When the button is click, event handler `handleClick` is called
- This then run the state-update function `setA`
- `setA` run change the value of state variable `a`
- The component re-render since there is a change in its state
- Since value of state variable `a` change, the callback in `useEffect` is called
- After all of this, the state-update function `setB` run
- `setB` run change the value of state variable `b`
- The component re-render since there is a change in its state
- Since value of state variable `b` change, the callback in `useEffect` is called

---> In short, we will have **two re-render** and **two run of `useEffect` callback**

---

However this is what _actually happened_:

- When the button is click, event handler `handleClick` is called
- ~~This then run the state-update function `setA`~~
- React say: wait there are 2 state-update functions you need to run - which is `setA` and `setB`. Let combine them and run them at once instead of one by one
- React see no more state-update functions it needs to run
- `setA` and `setB` run at the same time
- The value of state variable `a` and state variable `b` change at the same time
- The component re-render since there is a change in its state
- The callback in `useEffect` is called

---> We only have **ONE re-render** and **ONE run of `useEffect` callback**

This is what state batching does: it combines multiple state-update functions into one "batch" and run all these functions at once

**But why do we need state batching?**

As you can see in the example above, without state batching we need to run an additional re-render of component and an additional run of `useEffect` callback. This can be worse if we have more state variables compared to our example. Batching saves us time and resource.

## Reference

- [Does React keep the order for state updates?](https://stackoverflow.com/questions/48563650/does-react-keep-the-order-for-state-updates/48610973#48610973)


When multiple states are updated, chance is that they are not updated one by one. Instead, they are batched together and updated all at once

What is state batching

## Terms

In the code below

```tsx
const [state, setState] = useState(0);
```

I will call variable in `state` position as **state variable <name_of_variable>** (for example, the state variable `count`)

I will call function in `setState` position as **state-update function <name_of_function>** (for example, the state-update function `setCount`)

I will call value in `0` position as **initial value of state <name_of_state>** (for example, the initial value of state `count`)

## What is functional form of state-update function

Let take a look at the code below

```tsx
// Example 1
function Counter() {
  const [count, setCount] = useState(0);

  const incrementHandler() => {
    setCount(count + 1)
  }

  return (
    <>
      Count: {count}
      <button onClick={() => setCount(0)}>Reset</button>
      <button onClick={incrementHandler}>Increment</button>
    </>
  );
}
```

This is a very basic React app: we have a state variable and we want to update this state variable whenever the button is clicked.

Let's take a look at a different way we can write our `incrementHandler`

```tsx
// Example 2
function Counter() {
  const [count, setCount] = useState(0);

  function increment = number => number + 1

  const incrementHandler = () => {
    setCount(increment)
  }

  return (
    <>
      Count: {count}
      <button onClick={() => setCount(0)}>Reset</button>
      <button onClick={incrementHandler}>Increment</button>
    </>
  );
}
```

In this example 2, we use the functional form of state-update function to update state variable. We pass a function to `setCount` and the returned value of this function is the new value for `count`. This function will take in the current state as its argument.

So in our example, we have:

- `increment` is the function we pass to `setCount` to update state variable `count`
- `increment`'s argument is the current state variable `count`
- `increment`'s returned value will be the new value for state variable `count`

Let take a look at another example:

```tsx
// Example 3
function Counter() {
  const [count, setCount] = useState(0);
  const [price, setPrice] = useState(10)

  function increment = number => number + 1

  const incrementCountHandler = () => {
    setCount(increment)
  }

  const incrementPriceHandler = () => {
    setPrice(increment)
  }

  const reset = ( ) => {
    setCount(0)
    setPrice(10)
  }

  return (
    <>
      Count: {count}
      Price: {price}
      <button onClick={}>Reset</button>
      <button onClick={incrementCountHandler}>Increment count</button>
      <button onClick={incrementPriceHandler}>Increment price</button>
    </>
  );
}
```

In this example 3, we pass the same function `increment` to `setCount` and `setPrice`. Let's analyze what use what for each case.

For function `increment` that is passed to `setCount`:

- `increment`'s argument is the current state variable `count`
- `increment`'s returned value will be the new value for state variable `count`

For function `increment` that is passed to `setPrice`:

- `increment`'s argument is the current state variable `price`
- `increment`'s returned value will be the new value for state variable `price`

So we can see that the function `increment` receives _only state variable that is managed by that state-update function_ as argument, not all state variables existing within the app.

**But why do we need this functional form in the first place?**

The answer is: when you need to update state based off the previous state where the normal method fails to do.

## Different between normal and functional form of state-update function?

- The normal one `setState(value)` uses the value of `value` at the time the function `setState` is called. It doesn't know whether the value of `value` is staled or not due to closure (in other words, sometimes the state variable already updated but the `setState` still use the old value)
- The functional one `setState(oldState => value)` gives instruction to React: hey React, use the **LATEST, MOST UP-TO-DATE** value of state variable to create a new value. Multiple instructions of these kind can be stacked together and the new state of one is the `oldState` of another.

Let analyze this by using a simple example:

```tsx
// Example 4
function App() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 5); // (1) setCount
    setCount(count + 7); // (2) setCount
  };

  return (
    <div>
      Count is: {count}
      <button onClick={handleClick}>Change count</button>
    </div>
  );
}
```

This is what happened when we click the button:

1. We click on the button and function `handleClick` is called
2. `(1) setCount` is called (but not run) with the function `handleClick` receiving the the state-variable `count` with value 0 at the called time
3. `(2) setCount` is called (but not run) with\*the function `handleClick` receiving the the state-variable `count` with value 0 at the called time
4. As there is no more state-update function, both the state-update functions above are batched and being executed
5. `(1) setCount` set the count value to 5. `(2) setCount` set the count value to 7. Since `(2) setCount` is after `(1) setCount`, the _final value_ of `count` is 7

---

In comparison with using functional form

```tsx
// Example 5
function App() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount((count) => count + 5); // (1) setCount
    setCount((count) => count + 7); // (2) setCount
  };

  return (
    <div>
      Count is: {count}
      <button onClick={handleClick}>Change count</button>
    </div>
  );
}
```

This is what happened when we click the button:

1. We click on the button and function `handleClick` is called
2. `(1) setCount` is called, which trigger the callback inside
3. This callback gives React instruction: increase `count` by `5` with whatever the latest `count` value is
4. `(2) setCount` is called, which trigger the callback inside
5. This callback gives React instruction: increase `count` by `7` with whatever the latest `count` value is
6. As there is no more state-update function, both the state-update functions above are batched and being executed
7. At the very beginning, `count` is `0`. The latest value of `count` at the first instruction is `0`. Thus `count` is updated to `5`. The second instruction use the latest value of `count`, which is `5` right now. And thus `count` is updated to `12`
8. The final value of `count` is 12

---

Let take a look at a more realistic example of a problem we may face when trying to update a state variable:

```tsx
// Example 6
function App() {
  const [count, setCount] = useState(0);

  const slowClick = () => {
    // This can be any asynchronous action like API call, DOM update, etc.
    setTimeout(() => {
      setCount(count + 10);
    }, 2000);
  };

  const fastClick = () => {
    setCount(count + 1);
  };

  const reset = () => {
    setCount(0);
  };

  return (
    <div className="App">
      <h1>Slow-fast button</h1>
      <h2>Count is: {count}</h2>

      <button onClick={slowClick}>Slow click</button>
      <button onClick={fastClick}>Fast click</button>

      <div>
        <button onClick={reset}>Reset</button>
      </div>
    </div>
  );
}
```

If you try out the code above, you wil notice that the state-update function doesn't run as you expected: you click on the `Slow click` button really fast for multiple times (let say you click 3 times really fast) but the state variable `count` only update one and the value of `count` is only `10` instead of `30`.

Worse of that, if you try to click on `Slow click` button and `Fast click` button really fast (let say 2 times on slow click and 3 time on fast click) the state variable `count` is still only `10` instead of `23`.

## So what had happened here? Why example 4 and 6 failed

The answer is [closure](https://overreacted.io/a-complete-guide-to-useeffect/). I will not go into detail about what closure is (since that is a long topic on its own) and instead, I will provide you with a way to solve this issue using functional form of state-update function

```tsx
// Example 7
function App() {
  const [count, setCount] = useState(0);

  const slowClick = () => {
    setTimeout(() => {
      setCount((count) => count + 10);
    }, 2000);
  };

  const fastClick = () => {
    setCount(count + 1);
  };

  const reset = () => {
    setCount(0);
  };

  return (
    <div className="App">
      <h1>Slow-fast button</h1>
      <h2>Count is: {count}</h2>

      <button onClick={slowClick}>Slow click</button>
      <button onClick={fastClick}>Fast click</button>

      <div>
        <button onClick={reset}>Reset</button>
      </div>
    </div>
  );
}
```

By changing from normal update to using a callback to update state, we have everything work as expected.

## Batching or Closure

**Batching** is the behavior where multiple state-update functions are batched and run at them same time, results in only one state update and thus, only one re-render.

**Closure**, in the React context and in our example, means that a function is "closed". This means the arguments' value it received when it was called will remain as they are, despite the fact that outside of the function, those arguments' value may be updated or changed already.

In example 6, batching only affects how many time the component re-render and not the final value of state variable. Closure is the factor that affect the final value of state variable. We can test this our by eliminate batching in our example (for more info about batching, see [when does React batch state](https://www.juniorgocode.com/when-does-react-batch-state))

```tsx
// Example 8
function App() {
  const [count, setCount] = useState(0);

  const handleClick = async () => {
    await setCount(count + 5); // The await does nothing on setCount. It only disable batching
    setCount(count + 7); //
  };

  return (
    <div>
      Count is: {count}
      <button onClick={handleClick}>Change count</button>
    </div>
  );
}
```

You can read more about closure in React state in [this article written by Dan Abramov](https://overreacted.io/a-complete-guide-to-useeffect/) . Although the article doesn't specifically talk about closure but it still provides a very good explanation on the topic.

## Reference

- [React Official API on setState](https://reactjs.org/docs/hooks-reference.html#usestate)
- [Dan Abramov article on closure](https://overreacted.io/a-complete-guide-to-useeffect/)


If you use React Hooks before, you are probably familiar with using `setState` by passing the new value you want the state to update to to it. But do you know that it has a functional form?

Junior go Code

When does React batch state

December 23, 2021

What is state batching

December 16, 2021

What is functional form of setState

December 5, 2021