Conditional Gating Component for React Rendering

What does the pattern look like?

// Sign In Gateexport const SignInGate = ({ children }) => {  const user= useUser();  if (!user) return null;  return <div>{children}</div>;};
//------------------------------------------------
// use the Sign In Gateexport default function MembersOnly() { return ( <SignInGate> <MembersProduct /> </SignInGate> );}

Under what situation can this be used?

function ClientOnly({ children, ...delegated }) {  const [hasMounted, setHasMounted] = React.useState(false);  React.useEffect(() => {    setHasMounted(true);  }, []);  if (!hasMounted) {    return null;  }  return (    <div {...delegated}>      {children}    </div>  );}//-------------
// Render Navigation only in the client side!
<ClientOnly> <Navigation /></ClientOnly>

A software engineer passionate about learning and growth