When will you use this?

Use this lesson to build something you can show in interviews and on your resume.

• Portfolio projects prove you can finish — recruiters click your demo link.
• Build one dashboard or shop end-to-end; that beats ten half-finished tutorials.

Real-world: filter-driven charts

AI ops dashboard — date and model filters drive KPI cards and line chart from /api/analytics/query.

Production-style code

function AnalyticsDashboard() {
  const [range, setRange] = useState('7d');
  const { data } = useQuery({
    queryKey: ['analytics', range],
    queryFn: () => fetchAnalytics(range)
  });
  return (
    <>
      <FilterBar range={range} onRangeChange={setRange} />
      <KpiGrid metrics={data?.kpis} />
      <Suspense fallback={<ChartSkeleton />}>
        <TokenUsageChart series={data?.series} />
      </Suspense>
    </>
  );
}

What happens in production: Modern "AI dashboard" jobs want React + charts + filter UX — this project template covers it.

Lesson example (start here)

Copy this smaller example first. Once it works, compare it with the real-world code above.

const { data, isFetching } = useQuery({
  queryKey: ['metrics', filters],
  queryFn: () => fetchMetrics(filters),
  keepPreviousData: true
});

<FilterBar value={filters} onChange={setFilters} />
{isFetching && <span>Updating...</span>}
<LineChart data={data?.series} />

Line-by-line walkthrough

How it works (big picture)

• queryKey includes filters — changing filters refetches.
• keepPreviousData avoids chart flash empty while loading.

Do this on your computer

1. Static chart with fake data first.
2. Wire filters to Query key.
3. Add fetching indicator without blocking UI.
4. Read the real-world section and name which part of the app uses this topic.
5. Run the example locally and confirm the same behavior in the browser.
6. Change one value in the example (text, initial state, or URL) and predict what will happen before you save.

Experiments — try changing this

• Change text or labels in the example and save — watch the browser update.
• Break the code on purpose (remove a bracket), read the error message, then fix it.

Remember

Filters drive queryKey. Charts lazy loaded. Show subtle loading for refetch.

Common questions