title: Child component not re-rendering even though parent state is updated using hooks
body: <p>I have a functional component <code>App</code> with a <code>useEffect</code> hook and I'm trying to get the <code>&lt;Redirect&gt;</code> child component to re-render on a state change, specifically the call to <code>setUserInSystem</code>, which should update <code>userInSystem</code>, which is explicitly referenced in the render method. However the component does not re-render when <code>userInSystem</code> changes and I can't figure out why. (Note: both async functions <code>getUserInfo</code> and <code>getUserByWorkEmail</code> are working as expected and retrieving correct data.)</p>
  
  <pre><code>const App = (props) =&gt; {
    const { authState, authData } = props;
    const [signedIn, setSignedIn] = useState(false);
    const [userInfo, setUserInfo] = useState(undefined);
    const [userInSystem, setUserInSystem] = useState(false);
  
    useEffect(() =&gt; {
      setSignedIn(!(authState !== 'signedIn'));
      const fetchUser = async () =&gt; {
        const data = await getUserInfo();
        const userFound = await getUserByWorkEmail(data);
        setUserInSystem(userFound);
        setUserInfo(data);
      };
      if (authState === 'signedIn') {
        fetchUser();
      }
    }, [authState]);
  
  
  return (
      &lt;div&gt;
          &lt;BrowserRouter&gt;
              &lt;Switch&gt;
              &lt;Redirect
                  exact={true}
                  path="/"
                  to={userInSystem ? '/dashboard' : '/unverified'}
              /&gt;
              &lt;/Switch&gt;
          &lt;/BrowserRouter&gt;
        &lt;/LayoutProvider&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>