title: React private route function is called twice
body: <p>If user is logged in, render the component. If not, render login page. I notice, however, that this function is called twice. The first time, <code>useAuthDataContext()</code> is <em>null</em>. The second time, I get the correct object back.</p>
  
  <pre><code>const PrivateRoute = ({ component, ...options }) =&gt; {
    const { userData } = useAuthDataContext()
    console.log(userData)
    const finalComponent = userData != null ? component : Login
    return (
      &lt;Route {...options}  component={finalComponent} /&gt;
    )
  };
  
  export default PrivateRoute
  </code></pre>
  
  <p>I have rewritten this function as follows. Here, <code>PrivateRoute2</code> is called only once, and <code>useAuthDataContext()</code> returns <em>null</em>.</p>
  
  <pre><code>const PrivateRoute2 = ({ component: Component, ...rest }) =&gt; {
    const { userData } = useAuthDataContext()
    console.log(userData)
    return (
      &lt;Route
        {...rest}
        render={props =&gt;
          userData != null ? (
            &lt;Component {...props} /&gt;
            ) : (
              &lt;Redirect
                to={{
                  pathname: "/login",
                  state: { from: props.location }
                }}
              /&gt;
            )
          }
        /&gt;
      )
    }
  </code></pre>
  
  <p>Here is my useAuthDataContext() implementation that is causing the rerender:</p>
  
  <pre><code>export const AuthDataContext = createContext(null)
  const initialAuthData = {}
  
  const AuthDataProvider = props =&gt; {
  
    const [authData, setAuthData] = useState(initialAuthData)
  
    useLayoutEffect( (props) =&gt; {
      const getUser = async () =&gt; {
        try {
          const userData = await authService.isAuthenticated()
          setAuthData( {userData})
        } catch (err) {
          setAuthData({})
        }
      }
      getUser()
    }, [])
  
    const onLogout = () =&gt; {
      setAuthData(initialAuthData)
    }
  
    const onLogin = newAuthData =&gt; {
      const userData = newAuthData
      setAuthData( {userData} )
    }
  
    const authDataValue = useMemo(() =&gt; ({ ...authData, onLogin, onLogout }), [authData])
    return &lt;AuthDataContext.Provider value={authDataValue} {...props} /&gt;
  }
  
  export const useAuthDataContext = () =&gt; useContext(AuthDataContext)
  export default AuthDataProvider
  </code></pre>