Learn React Hooks

Splitting up components

Another way to solve conditional Hooks is to split up one component into multiple components and then conditionally render the components. For example, let's say we want to fetch user information from a database after the user logs in.

We cannot do the following, as using an if conditional could change the order of the Hooks:

function UserInfo ({ username }) {    if (username) {        const info = useFetchUserInfo(username)        return <div>{info}</div>    }    return <div>Not logged in</div>}

Instead, we have to create a separate component for when the user is logged in, as follows:

function LoggedInUserInfo ({ username }) {    const info = useFetchUserInfo(username)    return <div>{info}</div>}function UserInfo ({ username }) { if (username) ...