Extract useIsClient hook

web/components/relative-timestamp.tsx

@@ -1,22 +1,16 @@
 import { DateTimeTooltip } from './datetime-tooltip'
-import React, { useEffect, useState } from 'react'
 import { fromNow } from 'web/lib/util/time'
+import { useIsClient } from 'web/hooks/use-is-client'
 
 export function RelativeTimestamp(props: { time: number }) {
   const { time } = props
-  const [isClient, setIsClient] = useState(false)
+  const isClient = useIsClient()
-
-  useEffect(() => {
-    // Only render on client to prevent difference from server.
-    setIsClient(true)
-  }, [])
-
   return (
     <DateTimeTooltip
       className="ml-1 whitespace-nowrap text-gray-400"
       time={time}
     >
-      {isClient ? fromNow(time) : ''}
+      {isClient && fromNow(time)}
     </DateTimeTooltip>
   )
 }

web/hooks/use-is-client.ts

@@ -0,0 +1,7 @@
+import { useEffect, useState } from 'react'
+
+export const useIsClient = () => {
+  const [isClient, setIsClient] = useState(false)
+  useEffect(() => setIsClient(true), [])
+  return isClient
+}