Birth Year Histogram

Build a widget that fetches a list of birth years on mount and renders them as a histogram of per-decade counts. Two ideas combine: the async-data lifecycle (loading → loaded, render nothing real until the data arrives) and bucketing — collapsing many raw values into a handful of grouped counts, then drawing each group as a bar scaled to the largest.

Signature

// A self-contained component. No props.
function App(): JSX.Element;

// Provided: an async source that resolves the raw years.
function fetchBirthYears(): Promise<number[]>;

Examples

[1991, 1995, 1999, 2001, 2003]  →  1990s: 3   2000s: 2

counts → bars: the largest count fills the track (100%);
others scale proportionally — width = count / max * 100%.

Notes

• Fetch once, on mount. useEffect(…, []). Show a loading state while data is null.
• Bucket by decade. Math.floor(year / 10) * 10 is the bucket key; tally counts per key.
• Scale to the max. Each bar's width is count / max, so the tallest bucket is full-width.
• Out of scope. Real network error handling, axis ticks, tooltips — focus on fetch → bucket → bars.