React: need some help understand strict mode and what what qualifies as a side effect

Question

I encountered a weird bug in React the other day and this is the simplified version of it.

let count = 0;
export default function App() {
  const [countState, setCountState] = useState(count);
  const [countState2, setCountState2] = useState(count);
  const increaseCount1 = () => ++count;

  const handleClick = () => {
    setCountState(() => increaseCount1());
  };
  const handleClick2 = () => {
    setCountState2(() => countState2 + 1);
  };
  return (
    <div className="App">
      <h1>{countState}</h1>
      <button onClick={handleClick}>Btn1</button>
      <div>
        <h1>{countState2}</h1>
        <button onClick={handleClick2}>Btn2</button>
      </div>
    </div>
  );
}

Here is the live demo https://codesandbox.io/s/side-effect-ryfwr

when Btn1 got clicked on, countState will increase by 2 not by 1, while when Btn2 got clicked on, countState2 will increase by 1, which is expected. I was struggling to understand what caused countState to increase by 2. Then I figured it out it has something to do with React's strict mode. It is mentioned in the article that Functions passed to useState, useMemo, or useReducer can be doubled invoked to detect side effects. Given that, I think what I have passed in setCountState is a side effect i.e. setCountState(() => increaseCount1());

But I still don't quite understand why setCountState(() => increaseCount1()); is a side effect while setCountState2(() => countState2 + 1); is fine. I need a mental model. Can someone help me understand this more deeply?

`increaseCount1` changing `count` is a [side-effect](https://stackoverflow.com/questions/1073909/side-effect-whats-this) and because of `StrictMode`, it is incrementing `count` twice. You should update the state using the current state: `setCountState((currentState) => currentState + 1)` — Yousaf, Oct 07 '21 at 05:11
Generally, side effects of functions are anything the function does that directly changes anything outside the function. So, a function is allowed to receive data via its args or context and emit data via `return`, but that's it. — Ouroborus, Oct 07 '21 at 05:11

Drew Reese · Accepted Answer · 2021-10-07T07:12:35.780

To see how the mutation works, or is exposed, lets compare both implementations.

First example:

const increaseCount1 = () => ++count;

const handleClick = () => {
  setCountState(() => increaseCount1());
};

Assume countState and count are 0, when React double invokes setCountState this is what occurs:

setCountState(() => increaseCount1());
// (1) increaseCount1 invoked
// (2) ++count -> count incremented from 0 to 1
// (3) setCountState called with 1
setCountState(() => increaseCount1());
// (1) increaseCount1 invoked
// (2) ++count -> count incremented from 1 to 2
// (3) setCountState called with 2

Result is countState now is 2.

Second example:

const handleClick2 = () => {
  setCountState2(() => countState2 + 1);
};

Assume countState2 and count are 0, when React double invokes setCountState2 this is what occurs:

setCountState2(() => countState2 + 1);
// (1) countState2 + 1 = 0 + 1 = 1
// (2) setCountState2 called with 1
setCountState2(() => countState2 + 1);
// (1) countState2 + 1 = 0 + 1 = 1
// (2) setCountState2 called with 1

Result is countState2 now is only 1.

Conclusion

When the next state necessarily depends on the previous state you should use a functional state update that references from the previous state (passed as an argument). Incrementing a count is the actual prototypical React example for functional state updates.

setCount(count => count + 1)

Here the next count is incremented from the previous state's value.

React: need some help understand strict mode and what what qualifies as a side effect

1 Answers1

Conclusion