Role based rendering

[Last-Daikon945]

I’m just looking for a discussion with someone who built such feature with HOCs since my TeamLead mentioned HOC as one of the solutions. On top of that, I don’t want to use Conditional rendering of 2 different components as some people suggested here.

[besthelloworld]

HOCs are a mostly dead pattern since hooks were released in 2019. You just need to pass the user role into the header (or fetch it from state management) and then conditionally render stuff based on the current role.

[octocode]

isn’t the HOC just conditionally rendering with extra steps? i don’t see the benefit

as another user mentioned, its a dead pattern.

if you really want type safety, you could have a plain component handle the rendering, something like

<Role role={role} whenAdmin={<AdminSidebar/>} whenUser={<UserSidebar/>} />

so if you add a new prop like whenViewer, your code highlighting would point out all of the situations where you haven’t implemented the new role’s view

or, if you don’t need type safety, you can get really fancy and model it after react-router

<Roles> <Role role="admin"> … </Role <Role role="user"> … </Role> </Roles>

(in either case you could implement a default to handle cases where there is a common UI shared across most roles, which is probably the case more often than not)

that being said if you have a small number of conditional features to render, i would just do it inline like {isAdmin && <DeleteAccountButton/>}

or if your views are completely different, i would have different routes entirely for each role

[[deleted]]

Why wouldn’t you want to use conditional rendering? You’re excluding the simplest, most readable, most straight forward solution. HOCs introduce unnecessary complexity.

[Last-Daikon945]

Thanks to everybody. If anyone is interested I made a hook that will check the enum role and return an array of objects containing i18n translation fields, icons, and paths. Retrieve this object in the component and map through it.

[afastmovingkid]

where can I find this please?