DEV Community: sperez927

Slice Your JS: Lazy Load Components with React + Vite + Dynamic Imports

sperez927 — Tue, 03 Jun 2025 14:49:47 +0000

🚫 Problem: Big Bundles, Slow First Loads

Modern apps ship huge bundles. Tools like Vite and Webpack support code splitting, but it's often underused.
Here's how we dropped initial JS size by 40% by lazy-loading non-critical UI in Vite.

✅ Solution: Dynamic Import + React.lazy

Assume we have a heavy component:

export default function Chart() {
  // big lib like recharts, visx, or d3
  return <div>Heavy Chart</div>;
}

Instead of importing normally:

import Chart from "./Chart"

Use React.lazy:

const Chart = React.lazy(() => import(./Chart));

Wrap it with <suspense>:

📊 Result

Initial load time down ~40% on mobile
Less JS execution blocking Time to Interactive
Better Lighthouse scores

🧪 Vite Handle the Split

In Vite, you'll now see Chart.[hash].js as separate chunk. Automatically lazy-loaded when needed.

dist/
├── index.html
├── assets/
│   ├── main.[hash].js
│   └── Chart.[hash].js   ← ✅ Lazy-loaded!

🔧 Bonus Tips

Group multiple lazy components with import() + Promise.all
Always provide a <fallback> for UX
Profile with DevTools -> Network tab -> disable cache -> reload

🧠 Takeaway

If your app feels bloated - don't refactor the whole thing. Just start lazy-loading where it hurts most.

Stop Over-Rerenders: Smarter State Sharing in React with `useContextSelector`

sperez927 — Tue, 03 Jun 2025 14:32:08 +0000

🚫 Problem: Global Context = Silent Performance Killer

React's Context API is often misused as global state. It works - until updates to one part of the state cause every consumer to re-render.
We ran into this on a dashboard with many components reading shared filters. One toggle = full tree re-render. Not okay.

✅ Solution: Replace useContext with useContextSelector

Install the context-selector lib:

npm install use-context-selector

Then replace:

const { filters } = useContext(AppContext);

With:

const filters = useContextSelector(AppContext, ctx => ctx.filters)

Now only the components that care about filters will re-render.

🧪 Working Example

import {
  createContext,
  useContextSelector,
  useContext,
} from 'use-context-selector';
import React, { useState } from 'react';

const AppContext = createContext(null);

function Provider({ children }) {
  const [count, setCount] = useState(0);
  const [text, setText] = useState("");

  const value = { count, setCount, text, setText };
  return <AppContext.Provider value={value}>{children}</AppContext.Provider>;
}

function CountDisplay() {
  const count = useContextSelector(AppContext, ctx => ctx.count);
  console.log('Render: CountDisplay');
  return <div>Count: {count}</div>;
}

function TextDisplay() {
  const text = useContextSelector(AppContext, ctx => ctx.text);
  console.log('Render: TextDisplay');
  return <div>Text: {text}</div>;
}

Toggling one field no longer rerenders both. Easy win, real speed boost.

🧠 Takeaway

Avoid useContext for frequently-updated state
useContextSelector = scoped updates + happy FPS

AntD Tables Lag? Try This One Simple Virtualization Fix

sperez927 — Fri, 30 May 2025 19:16:12 +0000

🚫 Problem: AntD Tables Aren’t Fast By Default

Ant Design is a solid UI framework — until you throw large datasets into its default table.

We were rendering 300+ rows in a dashboard. Scroll lag, janky performance, and heavy DOM loads kicked in fast. It looked good… but felt broken.

✅ Solution: Virtualization with `react-window`

We swapped out the AntD <Table /> component and replaced it with a react-window virtualized list. The trick? Keep using AntD’s column logic to retain the look and feel.

import { FixedSizeList as List } from 'react-window';

const Row = ({ index, style }) => (
  <div style={style}>
    {renderRow(data[index])}
  </div>
);

<List
  height={400}
  itemCount={data.length}
  itemSize={35}
  width="100%"
>
  {Row}
</List>

This gave us:

Consistent UI
Way fewer DOM nodes
Smooth scrolling even with big datasets

📊 Results

~90% fewer DOM nodes
Scroll FPS doubled
Page feel instant again

💡 Takeaway
UI libraries like Ant Design give you power - not always performance. When dealing with big data, virtualize early. It's a one-time switch that saves your UX.

🔧 Bonus Tips

Use rowKey in tables to prevent re-renders
Don't render hidden columns
Profile performance in Chrome -> DevTools -> Performance

🔗 Resources

react-window
https://ant.design/components/table/

Debounced Search with useEffect + useRef (No UI Jank)

sperez927 — Thu, 29 May 2025 16:00:06 +0000

Optimized a product search bar in a React + AntD app.
🚫 Problem:

Every keystroke triggered API call
UI felt sluggish, unnecessary re-renders ✅ Fix:
Added debounced search via useEffect + setTimeout
Used useRef to track the time
Disabled input while loading

💡 Code Snippet:

useEffect(() => {
  const timer = setTimeout(() => search(query), 400);
  return () => clearTimeout(timer);
}, [query]);

⚡ Search is smoother, fewer network calls, happier users.

Compressing Critical CSS Payloads Without Breaking Layout

sperez927 — Thu, 29 May 2025 15:56:40 +0000

Revisited global styles in a legacy React app.
🚫 Before:

Global CSS: 240KB uncompressed
No purging of unused styles ✅ Fix:
Switched to Tailwind w/@layer and @apply
Enabled PurgeCSS in production
Inlined above-the-fold critical styles 📉 Result: CSS payload dropped to 288KB ⚡ First Contentful Paint improved by ~400ms (Lighthouse) 💡 CSS doesn't need to be big to be powerful.

Lazy Loading Above-the-Fold images Without Killing LCP

sperez927 — Wed, 28 May 2025 01:53:48 +0000

Rebuilt the product listing page for a multi-vendor marketplace using React + AntD.
🚫 Old setup: img tags with lazy loading on every product (including above-the-fold)
✅ Fix:

"Eager-load first 6 images (above-the-fold)"
**"Switch remaining to loading="lazy""
"Used IntersectionObserver for smooth fade-ins" 📉 Largest Contentful Paint dropped by 230ms (Chrome DevTools audit) *Code Insight:

<img
  src={product.image}
  loading={index < 6 ? "eager" : "lazy"}
  alt={product.name}
/>

Small changes, big wins.

#reactjs #fronted #webperformance #ux