Learn React Hooks

Splitting up components

A better solution would be to use the Hook in the UserInfo component instead. That way, we can keep the state for each user up to date, without having to deal with array logic:

function OnlineUsers ({ users }) {    return (        <div>            {users.map(username => <UserInfo username={username} />)}        </div>    )}function UserInfo ({ username }) {    const info = useFetchUserInfo(username)    // ... keep user info up to date ...    return <div>{info}</div>}

As we can see, using one component for each functionality keeps our code simple and concise, and also avoids the limitations of React Hooks.