Update timestamp text after a given time in React

I’m building a component for notifications. It looks like this:

const renderTime = eventTime => {
  let toDisplay = eventTime.toLocaleDateString();
  if (isJustNow(eventTime)) {
    toDisplay = "Just now";
  } else if (isToday(eventTime))
    toDisplay = eventTime.toLocaleTimeString("en", {
      hour: "2-digit",
      minute: "2-digit"
    });

  return <Text>{toDisplay}</Text>;
};

export default function NotificationCard({ item }) {
  return (
      <ListItem accessoryRight={() => renderTime(item.created)} />  
  );
}

This is React Native, but it shouldn’t matter.

What I want is, if the notification is from a minute ago to display Just now. If it is from more than a minute ago to display to full time. It is working okay, but it stuck on Just now.

My question is: How do I make the renderTime function reevaluate the text to display after a minute?

Answer

It depends on how you are using this component. If the component is a dumb component, You need to watch prop time on render and set time local timebases on that. Or you can create a smart component with setInterval to update time. Please check out below draft version of the code.

// Smart Component

const isJustNow = (time) => Date.now() - time < 5000;
const isToday = (time) => Date.now() - time < 24 * 60 * 1000;
const Timer = ({ time: currentTime }) => {
  const [time, setTime] = useState(currentTime);
  useEffect(() => {
    const id = setInterval(() => {
      setTime(new Date(time.getTime() - 1000));
    }, 1000);
    return () => clearInterval(id);
  }, [currentTime, time]);
  let toDisplay = time.toLocaleDateString();
  if (isJustNow(time)) {
    toDisplay = "Just now";
  } else if (isToday(time))
    toDisplay = time.toLocaleTimeString("en", {
      hour: "2-digit",
      minute: "2-digit"
    });

  return <h2>{toDisplay}</h2>;
};
export default function App() {
  const times = [new Date(), new Date(Date.now() - 2000)];
  return (
    <div className="App">
      {times.map((time) => (
        <Timer key={time} time={time} />
      ))}
    </div>
  );
}

Here in the above example, You are using currentTime as the initial time when it is mounted. Once the component is mounted, It will run its own scheduler to update time in the local state.

Working code:

(codesandbox)(https://codesandbox.io/embed/optimistic-leaf-y24nz?fontsize=14&hidenavigation=1&theme=dark)