On the face of it, state management in React JS is simple. The DOM gets rendered once when the page loads and it doesn’t get changed again unless you explicitly tell React to change a component of it using the useState hook. React does that, but not immediately, it schedules it and may do it in batch for performance reasons. But in general, you don’t care because the page changes the way you wanted it to, what seems to be immediately.

Schedules and Currency of State

But, because React only schedules the change, if you want to change state based on the previous state, you don’t know whether the state is current yet, or is still waiting to be updated on a schedule. Let’s use an example. Below I’ve created a simple counter – press the Count button and the count increases:

import { useState } from "react";

const Counter = () => {
  const [counter, setCounter] = useState(0);

  return (
    <>
      <div>{counter}</div>
      <button onClick={() => setCounter(counter + 1)}>Count</button>
    </>
  );
};
export default Counter;

You can see that I’m passing the counter value that is output from the useState hook back into the setCounter function that is output from the same hook. So here I’m updating state based on previous state.

Anonymous Functions and Previous State

There is an easy solution to this though and it is to use an anonymous function in the call to setCounter, set a parameter to that function and react will, by default, pass you the current version of that piece of state:

import { useState } from "react";

const Counter = () => {
  const [counter, setCounter] = useState(0);

  return (
    <>
      <div>{counter}</div>
      <button onClick={() => setCounter((currCounter) => currCounter + 1)}>
        Count
      </button>
    </>
  );
};
export default Counter;

It doesn’t matter what you call the parameter (well, it might if you have coding standards to adhere to), the parameter is positional. So call it what you want, as long as it’s the first parameter, and use it every time you want to update state based on previous state. React guarantees that that value will be current.

The featured image for this post is by Ivan Bandura on Unsplash

Hey there – thanks for reading!
Have I helped you? If so, could you…
React JS: Setting State Based on Previous State

Leave a Reply

Your email address will not be published. Required fields are marked *