Detect Client Environment with React

I often get confused about which React hooks are available in server components versus client components, especially since it’s easy for me to mix up with traditional SSR patterns.

Here’s the implementation of a useIsClient hook as a reminder: useEffect is used detect client-side rendering, then it must be a client hook.

function useIsClient() {
  const [isClient, setIsClient] = React.useState(false)

  React.useEffect(() => {
    setIsClient(true)
  }, [])

  return isClient
}