Question 1

Why does the countdown wait for useEffect instead of computing on first render?

Accepted Answer

Server rendering and the browser don't share a clock, so calling Date.now() during render would produce two different values and trigger a hydration mismatch. Starting from null and filling in the real countdown after mount keeps the very first paint identical everywhere.

Question 2

What shows before the first tick lands?

Accepted Answer

Every segment shows a pair of dashes, like "--d : --h : --m : --s", until the first client-side tick runs a moment after mount. That's expected, not a loading bug.

Question 3

How do I point this at a different event date?

Accepted Answer

Pass targetTimestamp as epoch milliseconds, for example Date.parse("2026-11-10T09:00:00Z"). Keep it a stable value per mount so the interval inside useEffect reads a consistent target.

Question 4

What happens once the countdown hits zero?

Accepted Answer

All four segments clamp at zero via Math.max, so nothing goes negative, and the inline link automatically switches from the register copy to "Join now".

Question 5

Can I make the countdown feel calmer for a far-off event?

Accepted Answer

Drop the seconds segment from the format string and raise the interval delay from 1000 to 60000 so it only updates once a minute. A countdown that updates less often reads as less urgent, which suits long-range events.

Question 6

Why is the target timestamp a number instead of a Date object?

Accepted Answer

A plain number of milliseconds since epoch serializes cleanly as a prop and matches how the rest of this block's demo data is shaped. Convert it to a Date only where you actually need one, such as inside a formatter.

Prop	Type	Default	Description
eyebrow	string	none	Label shown next to the calendar icon, e.g. the event name.
targetTimestamp	number	none	Epoch milliseconds the countdown ticks down to.
ctaLabel	string	none	Label for the inline register link before the event starts.
ctaHref	string	none	Destination for the inline link.
className	string	none	Extra classes for the outer element.

Banner Countdown Event

Docs

Installation

Usage

Props

Behavior notes

Frequently asked questions

More Banner Blocks