CODEWITHSUNDEEP
javascriptreactjs
Joji
Joji

Reputation: 5613

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

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?

Upvotes: 1

Views: 159

Answers (1)

Drew Reese
Drew Reese

Reputation: 202618

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.

Upvotes: 1

Related Questions