🎣

Client-only React

https://joshwcomeau.com/react/the-perils-of-rehydration/

June 11, 2020

On this page

A client-only wrapper component

A client-only wrapper component

jsx

export const ClientOnly = ({ children, ...delegated }) => {
  const [hasMounted, setHasMounted] = React.useState(false)
  React.useEffect(() => {
    setHasMounted(true)
  }, [])
  if (!hasMounted) {
    return null
  }
  return <div {...delegated}>{children}</div>
}

Use like so:

jsx

<ClientOnly>
  <Navigation />
</ClientOnly>

or you could use a hook:

jsx

export const useHasMounted = () => {
  const [hasMounted, setHasMounted] = React.useState(false)
  React.useEffect(() => {
    setHasMounted(true)
  }, [])
  return hasMounted
}

Which could be used like so:

jsx

function Navigation() {
  const hasMounted = useHasMounted()
  if (!hasMounted) {
    return null
  }
  const user = getUser()
  if (user) {
    return <AuthenticatedNav user={user} />
  }
  return (
    <nav>
      <a href="/login">Login</a>
    </nav>
  )
}

Edit this page