title: Am I unable to use inline "if" with useEffect in a functional React component?
body: <p>I am currently trying to work with Okta's React SDK to build an application using React using TypeScript, and I've chosen to use functional components instead of class-based ones.</p>
  <p>As such, I am having an issue with rendering part of my app's menu based on the authenticated state of the user.   The documentation shows using <code>useEffect()</code> to get the authenticated status of the user then using <code>useState()</code> to store user information based on that status.</p>
  <p>That seems quite logical in practice and a great idea, but when I try to use the following component:</p>
  <pre class="lang-js prettyprint-override"><code>import React, { useState, useEffect } from 'react';
  import { Dropdown } from 'semantic-ui-react';
  import { useOktaAuth } from '@okta/okta-react';
  
  export const HeaderUserMenu = () =&gt; {
  
      // Okta Hook, State
      const { authState, oktaAuth } = useOktaAuth();
      const [ userInfo, setUserInfo ] = useState(null);
  
      // Get info when our state/etc update with this.
      useEffect(() =&gt; {
          if (!authState.isAuthenticated) {
              setUserInfo(null);
          } else {
              oktaAuth.token.getUserInfo()
                  .then((info: any) =&gt; setUserInfo(info))
          }
      }, [authState, oktaAuth])
  
      return (
          { userInfo &amp;&amp; 
              &lt;Dropdown.Menu item text={userInfo.username}&gt;
                  &lt;Dropdown.Item&gt;Log Info&lt;/Dropdown.Item&gt;
              &lt;/Dropdown.Menu&gt;
          }
      )    
  
  }
  </code></pre>
  <p>I receive two errors:</p>
  <p><code>',' expected.</code> - This is pointing to the use of the <code>&amp;&amp;</code> operator to check <code>userInfo</code> (is it null or not?) for conditional rendering of this component.</p>
  <p><code>Object is possibly 'null'.</code> - This is pointing to the use of <code>userInfo.username</code> inside the conditionally rendered stuff.  The whole point of the logic is to only render <strong>if</strong> userInfo <strong>isn't</strong> null, so at this point userInfo <strong>can't</strong> be null, right?</p>
  <p>I'm not sure what I'm doing wrong here.</p>
  <p>I get the feeling that it has something to do with <code>useEffect</code>, but I guess I could be wrong, I'm still sort of getting used to using hooks in React, and even though I've used <code>useState</code> before, I've never used effects until now.</p>
  <p>Thanks in advance!</p>