title: React using Async Context for SocketIO
body: <p>I am trying to establish a socket connection with authentication. The token is in the SecureStore Expo, so I have to use an Async method.
  I was advised to use Context to give all my components access to the socket.</p>
  <pre class="lang-js prettyprint-override"><code>const DrawerNavigation = () =&gt; {
    const [socket, setSocket] = useState();
  
    useEffect(() =&gt; {
      async function connectToSocket() {
        const token = await SecureStore.getItemAsync('ACCESS_TOKEN');
        setSocket(io('http://10.0.2.2:3000', {
          extraHeaders: {
            'authorization': `Bearer ${token}`
          }
        }));
      }
      connectToSocket();
    }, [])
  
  
    return (
      &lt;SocketContext.Provider value={socket}&gt;
        &lt;Drawer.Navigator&gt;
             .........
        &lt;/Drawer.Navigator&gt;
      &lt;/SocketContext.Provider&gt;
    );
  };
  </code></pre>
  <p>Then, I wrote my component Home</p>
  <pre><code>const Home = ({ navigation }) =&gt; {
    const socket = useContext(SocketContext);
  
    useEffect(() =&gt; {
      // Anything in here is fired on component mount.
     if (socket) {
      socket.on('connect', () =&gt; {
        console.log('connected');
      });
     }
    }, [])
  </code></pre>
  <p>The socket connection with the server is not established. I guess useEffect is not called again when socket changes.</p>
  <p>Thanks for helping</p>