How Tariffs Actually Hit Your Wallet: Building a Calculator with Real Data

#finance #nextjs #tailwindcss #jspdf

With all the noise around tariffs in 2025-2026, I wanted to answer a simple question: how much do tariffs actually cost my household?

Turns out, the data exists. The Yale Budget Lab has published detailed research on tariff impacts broken down by income tier. So I built a calculator that makes this data accessible to anyone.

Try it here: Tariff Impact Calculator

The Data Model

The core insight from the research is that tariff impact isn't linear — it hits different income tiers and spending categories differently. Here's the simplified model:

const TARIFF_TIERS = [
  { max: 50000,   baseImpact: 1700, label: "Under $50K" },
  { max: 75000,   baseImpact: 2400, label: "$50K - $75K" },
  { max: 100000,  baseImpact: 2800, label: "$75K - $100K" },
  { max: 150000,  baseImpact: 3200, label: "$100K - $150K" },
  { max: Infinity, baseImpact: 3800, label: "$150K+" },
];

A household earning $75K/year can expect roughly $2,400/year in higher prices from tariffs. That's $200/month that silently disappears.

But the real nuance is in where that money goes.

Breaking It Down by Category

Not all spending categories are equally affected. Electronics have heavy tariff exposure (most are imported), while services have almost none. Here's how I weighted it:

const CATEGORY_WEIGHTS = {
  groceries:   { weight: 0.22, label: "Groceries & Food" },
  electronics: { weight: 0.28, label: "Electronics" },
  clothing:    { weight: 0.18, label: "Clothing & Apparel" },
  auto:        { weight: 0.20, label: "Automotive" },
  homeGoods:   { weight: 0.12, label: "Home Goods" },
};

Electronics take the biggest hit at 28% of the total impact. If you're buying a new phone, laptop, or TV this year, you're feeling it more than average.

The calculator lets users adjust their spending per category with sliders — someone who rarely buys electronics but spends heavily on groceries will see a different (lower) number.

The Interpolation Problem

One thing that bugged me about simple tier-based calculators: if you earn $49,999 you get one number, and at $50,001 you get a completely different one. That's not how economics works.

So I added smooth interpolation between tiers:

const tierIndex = TARIFF_TIERS.indexOf(tier);
if (tierIndex > 0) {
  const prevTier = TARIFF_TIERS[tierIndex - 1];
  const prevMax = prevTier.max;
  const currMax = tier.max === Infinity ? 200000 : tier.max;
  const fraction = Math.min(1, Math.max(0, 
    (income - prevMax) / (currMax - prevMax)
  ));
  baseImpact = prevTier.baseImpact + 
    fraction * (tier.baseImpact - prevTier.baseImpact);
}

This gives a smooth curve instead of hard jumps between tiers.

Performance: The INP Problem

After launching, Cloudflare Web Analytics flagged a 504ms Interaction to Next Paint (INP) on this calculator — 100% Poor. Every keystroke in the income input triggered:

Tier interpolation math
Category weighting across 5 categories
Category breakdown array generation
PDF data reconstruction via useMemo

All synchronous, all blocking the paint.

The fix was simple — React 19's useTransition:

const [, startTransition] = useTransition();

// Before (blocking):
onChange={(e) => setIncome(Number(e.target.value))}

// After (non-blocking):
onChange={(e) => {
  const v = Number(e.target.value);
  startTransition(() => setIncome(v));
}}

The browser now paints the input response immediately while the expensive calculations happen in the background. LCP went to 100% Good.

The Stack

Next.js 16 with static export (output: "export")
Tailwind CSS for styling
Cloudflare for CDN + Web Analytics
jsPDF for downloadable PDF reports
No database, no auth, no tracking cookies

The entire site is static HTML deployed via rsync. No server-side logic needed — all calculations run client-side.

What I Learned

Real data beats estimates. Using Yale Budget Lab numbers gives credibility that "I made up some percentages" doesn't.
Smooth interpolation matters. Users notice when their result jumps $700 from a $1 income change.
INP is a real ranking signal. Google uses Core Web Vitals for rankings. A 504ms INP on your most-visited page is actively hurting your SEO.
useTransition is underused. For any calculator/form with expensive derived state, it's a one-line fix that dramatically improves responsiveness.
Cloudflare Web Analytics > Google Analytics for understanding real traffic. GA showed 65 users in a week while Cloudflare HTTP traffic showed 944 "visitors" — most of which were bots. CF Web Analytics (the JS beacon, not the HTTP dashboard) gave the honest number: 20 real humans.