useState React hook allows updating state with a function

The useState hook in React is a great way to persist and update data within your React components. A simple component might look like this:

import React from 'react'
default function SimpleComponent() {
const [count, setCount] = React.useState(0)
const incrementCount = () => setCount(count + 1)
return (
<>
<h1>The Count is {count}</h1>
<button onClick={incrementCount}>+1</button>
</>
)
}

This approach works for most cases but relies on the value of count in the current render.

import React from 'react'
default function SimpleComponent() {
const [count, setCount] = React.useState(0)
const incrementCount = () => setCount((previousCount) => previousCount + 1)
return (
<>
<h1>The Count is {count}</h1>
<button onClick={incrementCount}>+1</button>
</>
)
}

In this second example we are passing setCount a function: (previousCount) => previousCount + 1. This function takes 1 argument, the previous value, and allows you to reference that value.

In most circumstances the first approach is fine, but the ability to pass a functional update guarantees that you're updating the correct value if it happened to be update multiple times in the same execution frame.

It makes me smile when I see it.