Lesson 1. Store a local state with useState 3. Alternative syntax to update the state

The function returned as the second value by useState (the setter) has two signatures to be called:

with the new value as a parameter (as seen at the beginning of this lesson)
with a callback: the current value will be passed as the first parameter, and the returned value will become the new state value.

const Counter = () => {
  const [count, setCount] = useState(0)

  return (
    <>
      <p>Count: {count}</p>
      <p>
        {/* First method */}
        <button onClick={() => setCount(count + 1)}>Increment v1</button>
      </p>
      <p>
        {/* Second method */}
        <button onClick={() => setCount((currentCount) => currentCount + 1)}>
          Increment v2
        </button>
      </p>
    </>
  )
}

render(Counter)const Counter = () => {
  const [count, setCount] = useState(0)

  return (
    <>
      <p>Count: {count}</p>
      <p>
        {/* First method */}
        <button onClick={() => setCount(count + 1)}>Increment v1</button>
      </p>
      <p>
        {/* Second method */}
        <button onClick={() => setCount((currentCount) => currentCount + 1)}>
          Increment v2
        </button>
      </p>
    </>
  )
}

render(Counter)
Result

So which one should you use? In most cases, you can use both, but to avoid some problems, it is recommended to use the callback syntax as soon as you need to update the state based on its previous value. We’ll see why in the next lessons.