title: Passing Socket.io object between React components
body: <p>I'm trying to implement live chat in my React application. This is my first time working with socket.io and I'm having some troubles with it.
  I create a new socket and connection in my <code>App.js</code> like this:</p>
  <pre><code>  const [socket, setSocket] = useState(null);
  
    const setupSocket = () =&gt; {
      const token = localStorage.getItem(&quot;token&quot;);
      if(token != null &amp;&amp; !socket) {
        const newSocket = io(&quot;http://localhost:5000&quot;, {
            query: {
                token: localStorage.getItem(&quot;token&quot;),
            },
            transport : ['websocket']
        });
  
        newSocket.on(&quot;disconnect&quot;, () =&gt; {
          setSocket(null);
          setTimeout(setupSocket, 3000);
        });
  
        newSocket.on(&quot;connect&quot;, () =&gt; {
        });
  
        setSocket(newSocket);
      }
    }
  
    // set the socket whenever the App component loads
    useEffect(() =&gt; {
      setupSocket();
    }, []);
  </code></pre>
  <p>and pass it from <code>App.js</code> to other components like this:</p>
  <pre><code>return (
        &lt;BrowserRouter&gt;
          &lt;Navbar /&gt;
          &lt;Switch&gt;
            &lt;Route exact path=&quot;/register&quot; component={Register} /&gt;
            &lt;Route path=&quot;/login&quot; 
                   render={() =&gt; &lt;Login setupSocket={setupSocket}/&gt;} 
                   exact
            /&gt;
            &lt;Route path='/chatroom' 
                   render={() =&gt; &lt;Chatroom socket={socket} /&gt;}
                   exact
            /&gt;
            &lt;Route path='/chat/:id' 
                   render={() =&gt; &lt;Chat socket={socket}/&gt;}
                   exact
            /&gt;
          &lt;/Switch&gt;
        &lt;/BrowserRouter&gt;
      );
  </code></pre>
  <p>I'm entering the <code>Chat</code> component from <code>Chatroom.js</code> via the link:</p>
  <pre><code>&lt;Button href={&quot;/chat/&quot; + String(chatroom._id)} className={classes.button} variant=&quot;contained&quot; color=&quot;primary&quot;&gt; Join &lt;/Button&gt;
  </code></pre>
  <p>And when I try to access the socket in <code>Chat.js</code>, <code>socket</code> is <code>null</code>:</p>
  <pre><code>import React, { useEffect, useState, useRef } from 'react'
  import {withRouter, useLocation} from &quot;react-router-dom&quot;;
  
  const Chat = ({match, socket}) =&gt; {
  
      const chatroomId = match.params.id;
      
  
      useEffect(() =&gt; {   
          console.log(&quot;Chat ID: &quot;, chatroomId);
          console.log(&quot;Socket: &quot;, socket);
         
          socket.emit(&quot;joinRoom&quot;, {
              chatroomId,
          });
  
          return () =&gt; {
              socket.emit(&quot;leaveRoom&quot;, {
                  chatroomId,
              })
          }
      }, []);
  
      return (
          &lt;div &gt;
              CHAT
          &lt;/div&gt;
      );
  }
  
  export default Chat;
  </code></pre>
  <p>Do you know what am I doing wrong? I tried to pass <code>socket</code> via the line from <code>Chatroom.js</code> along with <code>chatroom._id</code>, but learned it's impossible to pass an object that way. I'd appreciate any help!</p>