title: React useState - How should I use the setter function?
body: <h2><strong>Basic Situation</strong></h2>
  <p>Let's say I have a basic <code>useState</code> of a number:</p>
  <pre class="lang-js prettyprint-override"><code>const [valueOne, setValueOne] = useState(0);
  </code></pre>
  <p>I can write an <code>increase</code> function in two ways:</p>
  <p><strong>First way:</strong></p>
  <pre class="lang-js prettyprint-override"><code>// for one value
  const increaseOneFirstWay = useCallback(() =&gt; {
    setValueOne((prev) =&gt; prev + 1);
  }, []); // doesnt have dependency
  </code></pre>
  <p>Since the <code>setter function</code> of a <code>useState</code> doesn't change (<a href="https://stackoverflow.com/a/57180908/13172890">source</a>), I don't have to add any dependencies to my callback function.</p>
  <p><strong>Second way</strong></p>
  <pre class="lang-js prettyprint-override"><code>const increaseOneSecondWay = useCallback(() =&gt; {
    setValueOne(valueOne + 1);
  }, [valueOne]); // has one dependency
  </code></pre>
  <p>Here, since I am using <code>valueOne</code>, I have to add a dependency, so the callback updates accordingly.</p>
  <p>For a basic callback like this, using both ways seems fine. But what if it gets more complicated?</p>
  <h2>Complicated Situation</h2>
  <p>Now, instead of having one state, we will have three:</p>
  <pre class="lang-js prettyprint-override"><code>const [valueTwo, setValueTwo] = useState(0);
  const [valueThree, setValueThree] = useState(0);
  const [valueFour, setValueFour] = useState(0);
  </code></pre>
  <p>This time, the callback will need to use all three values. And some of them together.</p>
  <p><strong>First way:</strong></p>
  <pre class="lang-js prettyprint-override"><code>// for several values:
    const increaseSeveralFirstWay = useCallback(() =&gt; {
      setValueTwo((valueTwoPrev) =&gt; {
        setValueThree((valueThreePrev) =&gt; {
          setValueFour((valueFourPrev) =&gt; {
            return valueFourPrev + valueThreePrev + valueTwoPrev + 1;
          });
          return valueThreePrev + valueTwoPrev + 1;
        });
        return valueTwoPrev + 1;
      });
    }, []); // doesnt have dependency
  </code></pre>
  <p><strong>Second way:</strong></p>
  <pre class="lang-js prettyprint-override"><code>  const increaseSeveralSecondWay = useCallback(() =&gt; {
      setValueTwo(valueTwo + 1);
      setValueThree(valueThree + valueTwo + 1);
      setValueFour(valueFour + valueThree + valueTwo + 1);
    }, [valueTwo, valueThree, valueFour]); // has several dependency
  </code></pre>
  <p>Let's say that <code>valueTwo</code>, <code>valueThree</code>, and <code>valueFour</code> also change independently, wouldn't the <strong>first way</strong> be a better choice? Or is there a reason why someone would use the second way (Not opinion-based, but maybe performance? maybe it's not recommended at all to use the first way?)</p>
  <p><a href="https://codesandbox.io/s/quizzical-keller-3lned?file=/src/App.tsx" rel="nofollow noreferrer">Codesandbox</a></p>