Excelent question. Let me show how you can avoid branching logic in the parent component

export default function App = () =>{

const user = {}

const userByTypes = {

'admin' : <Admin /> ,

'superadmin' : <SuperAdmin />

}

return <>

{userByTypes[`${user.type}`]}

</>

}

Now you can argue We still have to add new code whenever we add a new type of user. And that's true. Because You can't avoid if-else 100%.

So why should we go in this route then?

The answer is for excapsulating related logic in the same component and extend the functionality easily.

I hope you understand my point.