🚀 New React Challenge: Live dashboard

Most live dashboards start with useState and a setInterval, then end up with duplicate timers, stale closures, and requests firing from tabs nobody is looking at. This challenge flips the approach: the data lives in an external store, and your component only subscribes to it and owns the polling lifecycle.

---

🧩 Overview

You get a live metrics store and a dashboard to wire up. Use useSyncExternalStore to read from the store, then coordinate the first load, polling, manual refresh, tab visibility, and failure states without duplicating a single value in React state.

👉 https://www.reactchallenges.com/challenges/live-dashboard

---

✅ Requirements

• Read from the provided store with useSyncExternalStore (dashboardStore.subscribe and dashboardStore.getSnapshot); store.ts is hidden and must be used as-is.
• On the first request, show the Updating… status and the skeleton, with no metric cards rendered.
• After the first success, show Live and render four cards: active users, revenue, requests, and error rate.
• Display the last successful update as Updated at HH:MM:SS.
• Start polling on mount when the document is visible, so the cards update without user interaction.
• During later polls (automatic or manual), keep the current cards on screen and show Updating… until the request succeeds.
• Stop polling when the dashboard unmounts.
• Make the refresh button fetch immediately instead of waiting for the next interval, and disable it while updating.
• On failure, show Error with the failure message and keep the last successful values on screen.
• Retry on the next interval after a failure.
• When the document becomes hidden, show Paused and stop making requests.
• When the document becomes visible again, refresh immediately and resume polling.

---

💡 Notes

• Pass getSnapshot directly to useSyncExternalStore. Don't copy the data into useState or build a new object inside the snapshot, or React will treat every read as a change.
• start returns the cleanup function that stops polling. Return it from the effect so StrictMode's double mount doesn't leave two timers running.
• Pausing is not only about clearing the interval — decide what should happen to a request that is already in flight.

---

🧪 Tests

1. Shows the skeleton and the updating status on mount
2. Renders the four metrics after the first fetch
3. Shows the time of the last successful update
4. Polls every five seconds and updates the metrics
5. Refreshes immediately when the refresh button is clicked
6. Shows an error and keeps the last successful data
7. Retries on the next interval after an error
8. Pauses polling while the tab is hidden
9. Refreshes and resumes polling when the tab becomes visible
10. Stops polling when the dashboard unmounts

---

You'll finish with a dashboard that stays consistent while data changes underneath it: a single source of truth, a polling lifecycle with real cleanup, and stale-while-revalidate UX that keeps the last good values on screen instead of flashing a skeleton.

🔥 Start the Challenge Now