const { useState, useEffect } = require('react')

const DelayRender = ({ renderAfter = 200, children }) => {
  const [renderComponent, setRenderComponent] = useState(false)

  useEffect(() => {
    const renderTimeout = setTimeout(() => {
      setRenderComponent(true)
    }, renderAfter)

    return () => {
      clearTimeout(renderTimeout)
    }
  }, [renderAfter])

  return renderComponent && children
}

export default DelayRender