able multiple times before the next render, instead of passing the _next
state value_ like ` setNumber(number + 1) ` , you can pass a _function_ that
calculates the next state based on the previous one in the queue, like `
setNumber(n => n + 1) ` . It is a way to tell React to “do something with the
state value” instead of just replacing it.

Try incrementing the counter now:

App.js

App.js

Reset  [ Fork
](https://codesandbox.io/api/v1/sandboxes/define?undefined&environment=create-
react-app "Open in CodeSandbox")

    
    
    import { useState } from 'react';
    
    export default function Counter() {
      const [number, setNumber] = useState(0);
    
      return (
        <>
          <h1>{number}</h1>
          <button onClick={() => {
            setNumber(n => n + 1);
            setNumber(n => n + 1);
            setNumber(n => n + 1);
          }}>+3</button>
        </>
      )
    }
    
    

Show more

Here, ` n => n + 1 ` is called an **updater function.** When you pass it to a
state setter:

  1. React queues this function to be processed after all the other code in the event handler has run. 
  2. During the next render, React goes through the queue and gives you the final updated state. 

    
    
    setNumber(n => n + 1);  
    
    
    setNumber(n => n + 1);  
    
    
    setNumber(n => n + 1);

Here’s how React works through these lines of code while executing the event
handler:

  1. ` setNumber(n => n + 1) ` : ` n => n + 1 ` is a function. React adds it to a queue. 
  2. ` setNumber(n => n + 1) ` : ` n => n + 1 ` is a function. React adds it to a queue. 
  3. ` setNumber(n => n + 1) ` : ` n => n + 1 ` is a function. React adds it to a queue. 

When you call ` useState ` during the next render, React goes through the
queue. The previous ` number ` state was ` 0 ` , so that’s what React passes
to the first updater function as the ` n ` argument. Then React takes the
return value of your previous updater function and passes it to the next
updater as ` n ` , and so on:

queued update  |  ` n ` |  returns   
---|---|---  
` n => n + 1 ` |  ` 0 ` |  ` 0 + 1 = 1 `  
` n => n + 1 ` |  ` 1 ` |  ` 1 + 1 = 2 `  
` n => n + 1 ` |  ` 2 ` |  ` 2 + 1 = 3 `  
  
React stores ` 3 ` as the final result and returns it from ` useState ` .

This is why clicking “+3” in the above example correctly increments the value
by 3.

###  What happens if you update state after replacing it

What about this event handler? What do you think ` number ` will be in the
next render?

    
    
    <button onClick={() => {  
    
    
      setNumber(number + 5);  
    
    
      setNumber(n => n + 1);  
    
    
    }}>

App.js

App.js

Reset  [ Fork
](https://codesandbox.io/api/v1/sandboxes/define?undefined&environment=create-
react-app "Open in CodeSandbox")

    
    
    import { useState } from 'react';
    
    export default function Counter() {
      const [number, setNumber] = useState(0);
    
      return (
        <>
          <h1>{number}</h1>
          <button onClick={() => {
            setNumber(number + 5);
            setNumber(n => n + 1);
          }}>Increase the number</button>
        </>
      )
    }
    
    

Here’s what this event handler tells React to do:

  1. ` setNumber(number + 5) ` : ` number ` is ` 0 ` , so ` setNumber(0 + 5) ` . React adds _“replace with` 5 ` ” _ to its queue. 
  2. ` setNumber(n => n + 1) ` : ` n => n + 1 ` is an updater function. React adds _that function_ to its queue. 

During the next render, React goes through the state queue:

queued update  |  ` n ` |  returns   
---|---|---  
”replace with ` 5 ` ”  |  ` 0 ` (unused)  |  ` 5 `  
` n => n + 1 ` |  ` 5 ` |  ` 5 + 1 = 6 `  
  
React stores ` 6 ` as the final result and returns it from ` useState ` .

###  Note

You may have noticed that ` setState(5) ` actually works like ` setState(n =>
5) ` , but ` n ` is unused!

###  What happens if you replace state after updating it

Let’s try one more example. What do you think `