gatsby-theme-try-ghost/src/components/common/effects/RenderOnClientOnly.js

A Gatsby theme for building flaring fast blogs from headless Ghost CMS.

import React from 'react'
import { useEffect, useState } from "react"

/**
 * RenderOnClientOnly
 *
 * Further info 👉🏼 https://joshwcomeau.com/react/the-perils-of-rehydration/
 */

const RenderOnClientOnly = ({ children, ...delegated }) => {
    const [hasMounted, setHasMounted] = useState(false)

    useEffect(() => {
        setHasMounted(true)
    }, [])

    if (!hasMounted) {
        return null
    }

    return (
        <div {...delegated}>
            { children }
        </div>

    )
}

export default RenderOnClientOnly