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.

Angular — How to render HTML containing Angular Components dynamically at run-time

Recursion, What is it ?

Angular Azure — Auth, CI/CD, IaC, and Serverless — Part 2

var, let, const in JavaScript || Basics :)

How to Learn Gatsby JS

JavaScript Algorithm: Word Count

EverdreamSoft Development Update: November 2020

BitCrystals Burn Report November 2020

React Native for Cross Platform Development

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 is new in react router dom version 6?

The life cycle of the react components

How to make a table in React with Hooks

How we use CSS Modules in React