/
🎣

Client-only React

https://joshwcomeau.com/react/the-perils-of-rehydration/
react
Table of contents
  • 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>
)
}
Want to make your own site like this? Try gatsby-theme-code-notes by Zander Martineau.
Notes on code. My second brain, by Zander Martineau.