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?

The Sign In Gate can be used in other area where we only want to show certain elements after the user has signed in. For instance, display members only content.

It can also be used in checking server/ client side rendering in SSR and avoid the UI flick when client renders over the existing server side rendered DOM.

Taking Josh Comeau’s example:

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

Love podcasts or audiobooks? Learn on the go with our new app.

Effective Destructuring or The Patterns of … in Javascript

// from Twitter

42 Great JavaScript Libraries and Frameworks or Front-End Developers

Power Automate hack: HTTP request to REST APIs without premium license

UI updates laggy? Meet useLayoutEffect.

How to not write code

React Testing

Basics introduction to JavaScript

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Sherry Hsu

Sherry Hsu

A software engineer passionate about learning and growth

More from Medium

What are hooks in React?

React Redux overview

Hooking up with React — React hooks and their vital role

About React Hooks