Skip to main content

useRenderDate

This hook returns the real moment the frame is being prepared, before the clock was moved forward to the moment it goes on display.

Frames are prepared shortly before they go on display, and new Date() and Date.now() give the display moment, which is what nearly every widget wants. This hook is for the rare request that has to carry the real time, such as one the receiving server signs, or turns away when its timestamp is not close to the server's own clock.

Import​

import { useRenderDate } from "~lib/use-render-date";

API​

const renderDate = useRenderDate();

Parameters​

This hook takes no parameters.

Return Value​

NameTypeDescription
renderDateDateThe real moment the frame is being prepared

A date is always returned. In the studio preview, and whenever a frame is prepared for immediate display, it is the same moment as the display time.

It is read once when the render starts, so the same instance is returned on every render and it is safe to use in a dependency list.

Example​

import { useFetch } from "~lib/use-fetch";
import { useRenderDate } from "~lib/use-render-date";

const Widget = () => {
  const renderDate = useRenderDate();
  const timestamp = Math.floor(renderDate.getTime() / 1000);

  const { data } = useFetch<{ price: number }>(
    `https://api.example.com/price?timestamp=${timestamp}`,
  );

  return <h1>{data.price}</h1>;
};

See Also​