React useState hook, calling setState with function

Question

There is a concept in React (when using hooks) that confuses me.

I made a component for explanation (that increases a counter):

const [counter, setCounter] = useState(0); // counter hook

// code will follow

// render
return (
  <div>
    <button onClick={handleClick}>+</button>
    <h3>{counter}</h3>
  </div>
);

For the handler function, I have seen different options to set the state.

First method (using setState() normally):

const handleClick = () => {
  setCounter(counter + 1);
};

Second method (creating a function inside setState() and returning the new value):

const handleClick = () => {
  setCounter((counter) => {
    return counter + 1;
  });
};

I thought the difference would be that with the second method, you could immediately do a callback after setting the state, like this:

const handleClick = () => {
  setCounter((counter) => {
      return counter + 1;
    }, () => {
      console.log(counter); // trying callback after state is set
  });
};

But when trying this (with both methods), the console displays the following error message:

Warning: State updates from the useState() and useReducer() Hooks don't support the second callback argument. To execute a side effect after rendering, declare it in the component body with useEffect().

So I think in both cases, using useEffect() as a callback on setState() is the right way.

My question is: what is the difference between the two methods and what method is best to set the state. I have read about state immutability but can not immediately see how it would make a difference in this example.

Voting to reopen because the linked question is about the Component this.setState, and this question is about the functional useState's second return argument. They're entirely different. — Jim Hunziker, Feb 23 '22 at 14:01

score 0 · Accepted Answer · answered Feb 23 '21 at 19:01

0

In your case it's the same.

Basically when your state is computed with your previous state you can use the second approach which gets the previous value.

Have a look in React docs about this:

Functional updates

answered Feb 23 '21 at 19:01

zb22

2,850
2
18
32

This does not answer the question. You do not have access to the newly set state even when passing a function to `useState`, only the previous one. – Adrian Bartholomew Oct 21 '21 at 11:35
I didn't say that there is an access the newly state at all when passing a callback, just saying that the second approach is useful when there is a need to update the new state based on the previous one. – zb22 Oct 22 '21 at 09:15

React useState hook, calling setState with function

1 Answers1