🚀 I accidentally fixed my React performance with one script tag

Sometimes the best performance wins come from tools you didn’t plan to use.

In my case, it was this one

<script src="https://cdn.jsdelivr.net/npm/react-scan/dist/auto.global.js"></script>

Yes, seriously.

🤔 The problem: “Why is everything re-rendering?”

I was working on a fairly standard React app — tables, filters, some global state, nothing crazy.

But something felt off:

• UI updates were sluggish
• Components re-rendered more than expected
• DevTools didn’t clearly show why

Classic React pain.

🔍 The tool I didn’t know I needed

I dropped in React Scan out of curiosity.

No config. No setup. Just a script tag.

And suddenly…

👉 My app lit up with visual indicators of re-renders.

Instead of guessing, I could now see:

• which components re-render
• how often they re-render
• what triggered them

It immediately exposed issues like:

❌ Unstable props

<MyComponent data={{ value: 1 }} />

❌ Functions recreated on every render

onClick={() => doSomething()}

❌ Missing memoization

const computed = heavyCalculation(data);

4. Fixing state boundaries

Big one.

I had state too high in the tree → causing cascade re-renders.

👉 Moving state closer to where it’s used reduced updates massively.

📈 The result

After ~30 minutes of cleanup:

• 🔻 Re-renders dropped significantly
• ⚡ UI became noticeably faster
• 🧠 Debugging became predictable instead of guesswork

And the best part?

👉 No premature optimization. Only fixing real problems.

⚠️ One important note

This is a debugging tool, not something you ship to production.

Use it locally or in dev environments only.