hook-vs-component.md

React Auth API

Looking at these two examples which one is better in your opinion, and why?

Pure hook

import {usePolicy} from 'shared/authorization';
import {productPolicy} from 'products';

...
function Product() {
  const [{loading}, directives] = usePolicy(productPolicy);
  
  return (
    <Page>
      {directives.edit.allowed ? <ProductStatus /> : <ViewOnlyProductStatus />}
      ...
    </Page>
  );
}

Component:

import {PolicyAuth} from 'shared/authorization';
import {productPolicy} from 'products';

...
function Product() {
  return (
    <Page>
      <PolicyAuth
        policy={productPolicy}
        directive="edit"
        onEval={({allowed, message}) => allowed ? <ProductStatus /> : <ViewOnlyProductStatus />}
        onLoading={() => <Skeleton />}
      />
      ...
    </Page>
  );
}

Multiple policies using Hooks:

import {usePolicy} from 'shared/authorization';
import {productPolicy} from 'products';
import {collectionPolicy} from 'collections';

...
function Product() {
  const [{loading, error}, producutDirectives, collectionDirectives] = usePolicy(productPolicy, collectionPolicy);
  
  return (
    <Page>
      {producutDirectives.edit.allowed ? <ProductStatus /> : <ViewOnlyProductStatus />}
      ...
    </Page>
  );
}