What is the best pattern for dynamically rendering components?

You are almost there, the problem is that you are sending the function definition and you have to call it. Change the line to this:

  { props.isLoggedIn ? reRouteToDash() : loginComponent() }

And that should solve it.

You could also call only one function like this:

{ renderComponent() }

And have this in the function:

const renderComponent = () => {
 if (props.isLoggedIn) return navigate('/dashboard')
 return <Login handleSuccessfulAuth={handleSuccessfulAuth} />
}

Related