Why Your App Feels Slow — And One Import Change That Fixes It
That innocent `import { Check } from 'lucide-react'` might be loading 1,500+ modules. Here's why barrel files hurt — and how to fix them in 30 seconds.
A collection of thoughts on web development, design, and the intersection of technology and creativity.
That innocent `import { Check } from 'lucide-react'` might be loading 1,500+ modules. Here's why barrel files hurt — and how to fix them in 30 seconds.
Changing four style properties one by one triggers four reflows. One class toggle triggers one. Here's how to stop the browser from doing unnecessary work.
Your nav has 5 sections with 20 links each. Multiple components each call .find() to get the active link. That's repeated O(n) scans. One Map gives you O(1) lookups.
Your notification feed formats "2 hours ago" fifty times for fifty items. Most share the same timestamp. A simple cache cuts the work to a handful. Here's when to use a Map vs React's cache().
You're comparing two arrays to see if the user changed their selection. You sort and join both before checking. If one has 5 items and the other 100, you just did a lot of work for nothing.
You're fetching a user by ID. The ID is missing. You still run the query. Validate params first — return early — and skip the round-trip.
You depend on width in your effect. Every pixel change — 767, 766, 765 — triggers a re-run. Narrow the dependency to the boolean you actually need.
Have you ever built a dashboard page that fetches multiple data sources? You probably did something like fetching users, then posts, then analytics - one after another. It works, but it's slow. Each request waits for the previous one to finish. There's a better way.
Your API route hits the database before checking if the user is logged in. Reorder: auth first, validate params, then query. Cheap logic before expensive work.
Ever noticed your event listeners re-subscribing more than they should? There's a subtle React pattern that can help - storing event handlers in refs. Let me show you when and why this matters.