title: ReactHooks unexpected array behavior inside useEffect using setInterval
body: <p>Value named 'a' in the bottom code behaves not expectedly at local, not in static site.</p>
  <p>I am expected that a is increasing by 100 per second, but increasing by 200 per second.</p>
  <p>This problem is occurred when app is started using the next commands.</p>
  <pre><code>next dev
  react-scripts start
  </code></pre>
  <p>How can I solve this problem? (And is this expected behavior of react hooks?) If possible, not using useReducer.</p>
  <p>I have already read <a href="https://ja.reactjs.org/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies" rel="nofollow noreferrer">the site</a>.</p>
  <pre class="lang-js prettyprint-override"><code>import { memo, useEffect, useState, VFC } from &quot;react&quot;;
  
  const StateLearning: VFC = () =&gt; {
    const [a, setA] = useState([
      [1, 2],
      [0, 4],
    ]);
  
  
    // This moved expectedly
    // useEffect(() =&gt; {
    //   const eff = setInterval(() =&gt; {
    //     a[1][0] += 100;
    //     console.log('add 100')
    //     setA([...a]);
    //   }, 1000);
    //   return () =&gt; clearInterval(eff);
    // }, [a]);
  
    // a[1][0] moves 0→100→300→500→……
    useEffect(() =&gt; {
      const eff = setInterval(() =&gt; {
        setA((prev) =&gt; {
          prev[1][0] += 100;
          console.log(&quot;add 100&quot;);
          console.info(prev)
          return [...prev];
        });
      }, 1000);
      return () =&gt; clearInterval(eff);
    }, []);
  
    return (
      &lt;div style={{ margin: &quot;10%&quot; }}&gt;
        &lt;div&gt;
          &lt;div&gt;
            {a[0][0]}, {a[0][1]}
          &lt;/div&gt;
          &lt;div&gt;
            {a[1][0]}, {a[1][1]}
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>
  <hr />
  <p>P.S.</p>
  <p>In addition, I also want to change value another function with like onClick.
  the latter code is example.</p>
  <pre><code>…
  // called by like onclick
  const multiple = () =&gt; {
      setA((p) =&gt; {
        const newArray = [
          [
            p[0][0] * p[0][0] + p[0][1] * p[1][0],
            p[0][0] * p[0][1] + p[0][1] * p[1][1],
          ],
          [
            p[1][0] * p[0][0] + p[1][1] * p[1][0],
            p[1][0] * p[0][1] + p[1][1] * p[1][1],
          ],
        ];
        
        return [...newArray];
      });
    };
  …
  </code></pre>