React SSR ClientSide component

ClientSide.js

import React from "react";

export const ClientSide = ({ children, placeholder, delay }) => {
    const [showState, setShowState] = React.useState(false);
    const delayInMillis = delay !== undefined ? parseInt(delay) : 0;

    React.useEffect(() => {
        const timeout = setTimeout(() => setShowState(true), delayInMillis);
        return () => clearTimeout(timeout);
    }, []);

    return showState ? children : placeholder || <React.Fragment></React.Fragment>;
};

export default ClientSide;

index.js

import React from "react"
import ClientSide from "../src/ClientSide"

const IndexPage = () => (
  <div>
    <p>rendered on the server</p>

    <ClientSide>
      <p>rendered on the client</p>
    </ClientSide>

    <ClientSide placeholder={<span>loading...</span>}>
      <p>with placeholder</p>
    </ClientSide>

    <ClientSide delay="1500">
      <p>with delay (1500ms)</p>
    </ClientSide>
  </div>
)

export default IndexPage