Reactで、複数のパラメーターをチェックしてコンポーネントをレンダリングするかどうかを決定する

Reactで、複数のパラメーターをチェックして、コンポーネントをレンダリングするかどうかを決定するときの書き方を整理します。

環境

• React 18.2.0

書いてみた

方法① return文の中で直接条件を判定する

type AppProps = {
  isUserLoggedIn: boolean;
  isAdmin: boolean;
};

export const App: FC<AppProps> = ({ isUserLoggedIn, isAdmin }) => {
  return <div>{isUserLoggedIn && isAdmin ? <p>Welcome, Admin!</p> : null}</div>;
};

方法② 条件を関数にする

type AppProps = {
  isUserLoggedIn: boolean;
  isAdmin: boolean;
};

export const App: FC<AppProps> = ({ isUserLoggedIn, isAdmin }) => {
  const isAdminUserLoggedIn = (): boolean => isUserLoggedIn && isAdmin;

  return <div>{isAdminUserLoggedIn() ? <p>Welcome, Admin!</p> : null}</div>;
};

方法③ 条件判定用のコンポーネントを用意する

type RenderIfProps = {
  condition: boolean;
  children: ReactElement | string;
};

const RenderIf: FC<RenderIfProps> = ({ condition, children }) => {
  return condition ? <>{children}</> : null;
};

type AppProps = {
  isUserLoggedIn: boolean;
  isAdmin: boolean;
};

export const App: FC<AppProps> = ({ isUserLoggedIn, isAdmin }) => {
  return (
    <div>
      <RenderIf condition={isUserLoggedIn && isAdmin}>
        <p>Welcome, Admin!</p>
      </RenderIf>
    </div>
  );
};

条件が簡単で再利用しない場合、①で十分そうですが、条件が複雑な場合は②、再利用を考える場合③がよさそうです。

参考

Amazon | React 18 Design Patterns and Best Practices - Fourth Edition: Design, build, and deploy production-ready web applications with React by leveraging industry-best practices | Roldán, Carlos Santana | Web Browsers