title: React useEffect vatibles are not defined outside the funtion
body: <p>I have a scope problem, I'm trying to declare a const varible inside useEffect hook from React but the varible is not beeing recognized outside the funtion.</p>
  
  <pre><code>import React, {  useEffect } from "react";
  
  function Commentsbox(props) {
  
    useEffect(() =&gt; {
      //Connect to socket server.
    const socket = socketIOClient(baseUrl);
    }, []);
  
  async function postComment(content, user) {
        fetch(`${baseUrl}/comment/post`, {  
  //Do something.  
        })
          .then((res) =&gt; res.json())
          .then((data) =&gt; {
           socket.emit("msgToServer", newComment);
  });     
      }
    }
  </code></pre>
  
  <p>As you can see what I'm trying to do is to make the client side emit new event called <strong>"msgToServer"</strong> as soon as response is coming from the server, but it keep throw that error <strong>"socket' is not defined"</strong>.</p>
  
  <p>I tried to fix this by declare <strong>socket</strong> variable right above useEffect and giving it a value of undefined or null and then give it the value that I want inside useEffect() but still it does not define.</p>
  
  <pre><code>function Commentsbox(props) {
  let socket;
  useEffect(() =&gt; {
      //Connect to socket server.
      socket = socketIOClient(baseUrl);
    }, []);
  }
  </code></pre>
  
  <p>I don't wanna give it value without using <strong>useEffect()</strong> hook because then it gives it the value a couple like 10 times which causes  10 connections to the socket.</p>
  
  <p>Does anyone got any clue how to make it get the value?</p>