title: React hooks state is undefined when updating
body: <p>I have a simple React Hooks component. When I try and update the lightState using the setLightState function it returns <code>undefined</code> for the current state. Accessing the state inside the return body works fine.</p>
  
  <pre class="lang-js prettyprint-override"><code>const MainControl = () =&gt; {
    const [lightState, setLightState] = useState()
    const [lightChan, setLightChan] = useState()
  
    const updateLight = (newState) =&gt; {
      setLightState({...lightState, ...newState})
    }
  
    useEffect(() =&gt; {
  
      socket.connect()
      let chan = socket.channel("lights:dioder")
  
      chan.join().receive("ok", (response) =&gt; {
        setLightState(response)
        setLightChan(chan)
      })
  
      chan.on("light_colour", (resp) =&gt; {
        updateLight(resp)
      })
  
      return () =&gt; {
        chan.leave()
      }
    }, [])
  
    if (!lightChan) return &lt;h2&gt;Loading...&lt;/h2&gt;
  
    return (
       &lt;h2&gt;Lights are currently {lightState.on ? "on" : "off"}&lt;/h2&gt;
    )
  }
  
  </code></pre>
  
  <p>The <code>updateLight</code> function reads <code>lightState</code> as <code>undefined</code>, but the return body does not? I think this may only be true on the first render but I'm not sure.</p>
  
  <p>Thanks</p>