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 <>




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.