Formatting relative times with useNow should sync "instantly" client side when component re-render

[theoludwig]

Description

As explained in documentation here: https://next-intl-docs.vercel.app/docs/usage/dates-times#supplying-now
We can use both useFormatter and useNow (with a updateInterval) to format relative time (format.relativeTime(dateTime, now)).

The problem is that useNow first uses the time (new Date()) when the component was rendered. So given a list of items in a useState which store for each item, a date createdAt, and we dynamically create new items client side with a button, the relative time is first wrong (a relative time in the future), until it is updated with updateInterval).

Verifications

• I've verified that the problem I'm experiencing isn't covered in the docs.
• I've searched for similar, existing issues on GitHub and Stack Overflow.
• I've compared my app to a working example to look for differences.

Mandatory reproduction URL

https://github.com/theoludwig/next-intl-bug-repro-relative-time-now

Reproduction description

I've created a minimal reproduction using the template (https://github.com/amannn/next-intl-bug-repro-app-router), and only changed:

• Used <NextIntlClientProvider /> in root layout
• Changed the index page (/) to create a Demo component:

"use client"

import { useFormatter, useNow } from "next-intl"
import { useState } from "react"

interface Item {
  name: string
  createdAt: Date
}

const Demo: React.FC = () => {
  const [items, setItems] = useState<Item[]>([])
  const now = useNow({
    updateInterval: 10_000,
  })
  const format = useFormatter()

  return (
    <main>
      <button
        onClick={() => {
          setItems((oldItems) => {
            return [
              ...oldItems,
              { name: `Item ${oldItems.length + 1}`, createdAt: new Date() },
            ]
          })
        }}
      >
        Add item
      </button>

      <ul>
        {items.map((item) => {
          return (
            <li key={item.name}>
              <span>{item.name}</span>
              <span> - </span>
              <span>Created {format.relativeTime(item.createdAt, now)}</span>
            </li>
          )
        })}
      </ul>
    </main>
  )
}

export default Demo

Here each time we click on the button "Add item", we add a new item, and then display it, below in a list with the createdAt date. However, the relative time displayed is first wrong (a date in the future):

Then thanks to updateInterval, it is later correct.

Expected behaviour

The relative time displayed should be correct "instantly" in the first render.

What I'm suggesting is that useNow should update each time the component re-render, not needed to wait until updateInterval to update it when the component re-render, so that the displayed relative time is correct in the first re-render.

[amannn]

now refers to a global value that is shared across your whole application. updateInterval can help to sync it periodically for a given call site, but according to the rules of React, the value is not updated just by a component re-rendering—a React component should always be ready to render.

Instead, for your case you can make this more explicit, e.g. creating a value now based on the initial global value:

const [now, setNow] = useState(useNow());

… and later updating it for every interaction that you find "worthy" of updating the time:

      <button
        onClick={() => {
          setNow(new Date())
          // ...

I'll move this to a discussion since this is a usage question.

[theoludwig]

Thank you for taking the time to answer. 😄

Hmm, I was hoping for a built-in way to do it (by next-intl), as it seems a "normal"/"frequent" use case.
While indeed making a state now works, we now need to manage the updateInterval ourselves:

const [now, setNow] = useState(useNow())

useEffect(() => {
  const timeout = setTimeout(() => {
    setNow(new Date())
  }, 10_000)

  return () => {
    clearTimeout(timeout)
  }
}, [])

Anyway that's a solution that works, will mark it as answer.

[ChristianIvicevic]

For what it's worth it, you can use usehooks-ts if you're open to adding another dependency to gain access to a convenient useInterval or useTimeout hook.

Additionally, I'd like to share my use case where I ran into less than ideal stale values of useNow. Simply put, the value for now passed into the next-intl provider within the root layout is stale for as long as users route within the application without refreshing the root layout or hard reloading it. Consequently countdowns I displayed had an undesirable behaviour wherein navigating back and forth showed their initial value from a few seconds ago (based on the stale now value) before it updated to the correct value. As a workaround I had to use an interval as well as an effect to update the value on the client when mounting:

function Countdown({ className, endsAt }: { endsAt: Date; className?: string }) {
  const [now, setNow] = useState(useNow())
  useEffect(() => {
    setNow(new Date())
  }, [])
  useInterval(() => {
    setNow(new Date())
  }, 1_000)
  return <Duration value={Math.max(0, differenceInSeconds(endsAt, now))} className={className} />
}