JS You Should Know: Taking Advantage of Previous State With UseState Hook

For the past few years, React has been the top choice in the JS community by far. Securely lengthening that stay can be attributed to the introduction to hooks in React 16.8. This migrated the default component architecture from classical Class components to functional components, without losing any functionality.

Probably the most used hook of them would have to be useState. This hook creates a state variable with an update method to reset its value. While for the most part, it’s pretty straightforward, there are a couple of cases where you’ll be dependent on ensuring you’re actually updating based on the current value. Like keeping track of a number of occurrences for example. To accomplish that, this hook does give access to that current value in the form of a callback.

Let’s take a look!

import { useState } from "react";

const DummyComponent = () => {
  const [count, setCount] = useState<number>(0);  

  const updateCount = (): void => {
    setCount((current: number) => current++));
  }

  return (
    <>
      <p>Clicked {count} time{count === 1 && "s" }</p>
      <button onClick={updateCount}>Update Count</button> 
    </>
  );
}