Coding
Tricks

1. Ensuring a component is only rendered on the client side in NextJS got easier with this hook

   TypeScript

   import { Fragment, useEffect, useState } from "react"
   
   export default function requireHydration(WrappedComponent: any) {
     return function Component(props: any) {
       const [isHydrated, setIsHydrated] = useState(false)
   
       useEffect(() => {
         setIsHydrated(true)
       }, [])
   
       if (!isHydrated) return <Fragment />
   
       return <WrappedComponent {...props} />
     }
   }