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'

export 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'

export 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.

Let's chat about coding, business, learning, and teaching.

I send articles and thoughts occasionally and love to have conversations with folks. Lots of people like them, and I'd love to learn what you think as well. You can always unsubscribe.

Joel Hooks © 2022