Let’s say you want to enable or disable some features based on users role or some permission that the user is granted in the frontend. You could do this with a simple conditional rendering in each component by checking for users permission

<div>
 {role==='guest' && <GuestBanner/>}
</div>

But this is really messy if you have to do this in multiple components. We could instead create a custom hook that returns Boolean saying if we should enable or disable the feature

import { useSelector } from 'react-redux';

const useFeature = (feature) => {

 // If you use something other than redux replace useSelector with equivalent
// getRole is selector to select user role from redux state
const role = useSelector(getRole)

if(feature === 'guestBanner') {
  if(role === 'guest') return true;

  return false;
}

return true;

}

And then in your component you use this as follows

import useFeature from './use-feature';

const GuestBanner = () => {
  const enable = useFeature('guestBanner');

  if(!enable) return null;

   return <h1>Guest Banner</h1>

}

This post is also available on DEV.