title: React useState not updating, in socket.io events
body: <p>I am trying to update my state in a socket.io event,
  but only the most recent changes are reflected , and the previous changes are gone</p>
  <pre class="lang-js prettyprint-override"><code>  const [connStatus, setStatus] = useState({});
    const newConn = (user_id) =&gt; {
      console.log(&quot;previous &quot;, connStatus);
      console.log(&quot;new status &quot;, { ...connStatus, [user_id]: true });
      setStatus({ ...connStatus, [user_id]: true });
    };
  </code></pre>
  <p>i am using this fucntion <code>newConn</code>to update values,</p>
  <pre class="lang-js prettyprint-override"><code>    props.socket.on(&quot;ANSWER&quot;, (incoming) =&gt; {
       
        const desc = new RTCSessionDescription(incoming.sdp);
  
        peers.current[incoming.caller]
          .setRemoteDescription(desc)
          .then((data) =&gt; {
            // set conn as true
            console.log(connStatus, { ...connStatus, [incoming.caller]: true });
            newConn(incoming.caller);
          })
          .catch((e) =&gt; console.log(e));
      });
  </code></pre>
  <p>The previous state is always logged as empty <code>{}</code> i.e its initial value, and new state is updating but discards all the previous values.</p>
  <p>For</p>
  <pre class="lang-js prettyprint-override"><code>newConn(&quot;key1&quot;); newConn(&quot;key2&quot;);
  </code></pre>
  <p>the logs look like this</p>
  <pre><code>previous {}
  new status {&quot;key1&quot; : true}
  
  previous {}
  new status {&quot;key2&quot; : true}
  </code></pre>
  <p>using a function signature like</p>
  <pre class="lang-js prettyprint-override"><code>  const newConn = (user_id) =&gt; {
      setStatus((prevState) =&gt; {
        console.log(&quot;previous &quot;, prevState);
        console.log(&quot;new status &quot;, { ...prevState, [user_id]: true });
        return { ...connStatus, [user_id]: true };
      });
    };
  </code></pre>
  <p>For</p>
  <pre class="lang-js prettyprint-override"><code>newConn(&quot;key1&quot;); newConn(&quot;key2&quot;); newConn(&quot;key3&quot;);
  </code></pre>
  <p>the logs looks like this</p>
  <pre class="lang-js prettyprint-override"><code>previous {}
  new status {&quot;key1&quot; : true}
  
  previous {&quot;key1&quot; : true}
  new status {&quot;key1&quot; : true,&quot;key2&quot; : true}
  
  previous {&quot;key2&quot; : true}
  new status {&quot;key2&quot; : true,&quot;key3&quot; : true}
  </code></pre>
  <p><strong>UPDATE</strong></p>
  <p>I have found the solution , but not sure why it works and my previous attempts don't</p>
  <pre class="lang-js prettyprint-override"><code>  const newConn = (user_id) =&gt; {
      setStatus((prevState) =&gt; {
        console.log(&quot;previous &quot;, prevState);
        console.log(&quot;new status &quot;, { ...prevState, [user_id]: true });
        const newState = { ...prevState, [user_id]: true };
  
        return newState;
      });
    };
  </code></pre>
  <p>Using <code>newConn</code> gives me the required output.</p>