title: Use useState value in useEffect without making the state update useEffect
body: <p>I'm working on a function that manages a string array based on object keys. Let's say it looks like this:</p>
  <pre class="lang-js prettyprint-override"><code>import React, { useState, useEffect } from &quot;react&quot;;
  import FieldContext from &quot;../contexts/FieldContext&quot;;
  import io from &quot;socket.io-client&quot;;
  
  const [socket, setSocket] = useState(null);
  // the `data` array gets changed every second due to a WebSocket, in case that's important
  const [data, setData] = useState({ foo: [], bar: [] });
  const [connections, setConnections] = useState([&quot;conn1&quot;, &quot;conn2&quot;]);
  
  const { checkedFields } = useContext(FieldContext); // [&quot;foo&quot;, &quot;moo&quot;];
  
  useEffect(() =&gt; {
    setConnections(prevConnections =&gt; {
      // The code below does the following: 
      // Loop through the temporary connections (which is a copy of checkedFields)
      // A. if `tempConn` is a key in the `data` object, push the name with `update_` prefix to the `_conns` array
      // B. If not, just push it without a prefix to the `_conns` array
      // Since the `checkedFields` array is [&quot;foo&quot;, &quot;moo&quot;], the first element will get the prefix,
      // the other won't and will just get pushed.
      let _tempConns = [...checkedFields];
      let _conns = [];
      _tempConns.forEach(tempConn =&gt; {
        if (data[tempConn] !== undefined) _conns.push(`update_${tempConn}`);
        else _conns.push(tempConn);
      });
      return _conns;
    });
  }, [checkedFields]);
  
  // the websocket hook
  useEffect(() =&gt; {
    const _socket = io(WS_URI);
    _socket.on(&quot;info&quot;, data =&gt; {
      // some magic happens here to add to the `data` object which is not important for this question
    });
    setSocket(_socket);
  }, [])
  </code></pre>
  <p>I get the following warning while using this hook: <code>React Hook useEffect has a missing dependency: 'data'. Either include it or remove the dependency array</code>. Which I understand, but if I include <code>data</code> in the dependency array, I get an enormous amount of unnecessary updates. How do I prevent that from happening? <em>(without using <code>// eslint-disable-next-line</code> please)</em></p>