title: Using React Hooks, using "useState" and "useEffect", is there a way to render a state waiting till the state has a value?
body: <p><strong>What am I trying to do?</strong></p>
  <p>Render <code>characterInfo</code> via React Hooks onto the front-end.</p>
  <p><strong>What is the code that currently tries to do that?</strong></p>
  <p>The front-end component rendering the info:</p>
  <pre><code>export default function ReactComponent() {
    const [characterInfo, setCharacterInfo] = useState([]);
  
    useEffect(() =&gt; {
      socket.emit(&quot;/character/read&quot;);
      socket.on(&quot;/character/read&quot;, function (data) {
        if (data.status === &quot;SUCCESS&quot;) {
          setCharacterInfo(data)
        }
      });
      return () =&gt; {
        socket.off(&quot;/character/read&quot;);
      };
    }, []);
  
    return (
      &lt;div&gt;
        {characterInfo.models[0].name}
      &lt;/div&gt;
    )
  }
  </code></pre>
  <p>The back-end <code>.json</code> info as &quot;data&quot; and also what is saved onto <code>characterInfo</code> by <code>setCharacterInfo</code>:</p>
  <pre><code>{
    status: &quot;SUCCESS&quot;
    models: [
      { 
        name: &quot;AC&quot;,
        element: &quot;Air&quot;,
      }
      {
        name: &quot;Irene&quot;,
        element: &quot;Fire&quot;,
      }
    ]
  }
  </code></pre>
  <p>(so in this case to access &quot;AC&quot;, it would be <code>characterInfo.models[0].name</code>)</p>
  <p><strong>What do I expect the result to be?</strong></p>
  <p>I expect simply <code>AC</code> to be rendered.</p>
  <p><strong>What is the actual result?</strong></p>
  <p>I would get this error:</p>
  <p><code>TypeError: Cannot read property '0' of undefined</code></p>
  <p><strong>What I think the problem could be?</strong></p>
  <p>I think it has to deal with asynchronous balancing, especially with the <code>useEffect()</code>. I think the front-end tries to render before <code>setCharacterInfo</code> decides to even set anything.</p>