How to Improve React App Performance with Simple Hacks 🚀

🚀 Why React Performance Matters

A slow React app can frustrate users, increase bounce rates, and even impact SEO. Instead of a complete rewrite, you can use simple optimizations to significantly boost your React app’s speed and efficiency.

Let’s explore proven techniques to improve performance while keeping the code clean and scalable.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

1️⃣ Prevent Unnecessary Re-Renders with React.memo() 🧠

By default, React re-renders child components even if their props haven’t changed. This can be inefficient.

✅ Solution: Use React.memo() to prevent unnecessary re-renders by memoizing components.

❌ Unoptimized Version

const ChildComponent = ({ name }) => {
  console.log("Child Rendered!");
  return <h2>Hello, {name}!</h2>;
};

const ParentComponent = () => {
  const [count, setCount] = React.useState(0);
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increase</button>
      <ChildComponent name="John" />
    </div>
  );
};

🔹 Issue: Even though name="John" never changes, ChildComponent re-renders every time the button is clicked.

✅ Optimized with React.memo()

const ChildComponent = React.memo(({ name }) => {
  console.log("Child Rendered!");
  return <h2>Hello, {name}!</h2>;
});

🔥 Now, ChildComponent only re-renders if name changes!

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

2️⃣ Optimize Lists with key and React Virtualization 🔥

Large lists can slow down your app due to excessive re-renders.

✅ Solution:

• Use a unique key (not index) for lists.
• Use react-window for rendering large lists efficiently.

❌ Unoptimized List

{items.map((item, index) => (
  <div key={index}>{item.name}</div>
))}

⚠️ Issue: Using index as key can cause unnecessary re-renders.

✅ Optimized with Unique key

{items.map((item) => (
  <div key={item.id}>{item.name}</div>
))}

🔹 Why? React efficiently tracks list updates based on unique id.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

🚀 Supercharged: Virtualized List for Large Data

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

const MyList = ({ items }) => (
  <List height={400} itemCount={items.length} itemSize={50} width="100%">
    {({ index, style }) => <div style={style}>{items[index].name}</div>}
  </List>
);

🔥 Now, React only renders visible items, boosting performance!

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

3️⃣ Optimize Functions with useCallback() and useMemo() 🔄

❌ Problem: Unnecessary Function Recreation

Each re-render creates new function instances, causing unwanted re-renders in child components.

✅ Solution:

Use useCallback() for Function Memoization

const ParentComponent = () => {
  const [count, setCount] = React.useState(0);

  const handleClick = React.useCallback(() => {
    console.log("Button Clicked!");
  }, []);

  return <ChildComponent onClick={handleClick} />;
};

🔹 Now, handleClick doesn’t change on every render! 🚀

✅ Optimize Expensive Calculations with useMemo()

If a component performs heavy calculations, it slows down the app. Use useMemo() to cache results.

const expensiveCalculation = (num) => {
  console.log("Calculating...");
  return num * 2;
};

const MyComponent = ({ num }) => {
  const result = React.useMemo(() => expensiveCalculation(num), [num]);
  return <div>{result}</div>;
};

🔥 Now, the function only runs when num changes!

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

4️⃣ Optimize Images and Assets 📸

Large images slow down page load time. Use:
✅ Lazy Loading (Load images only when needed)
✅ Next.js Image Optimization (For Next.js projects)

🔹 React Lazy Loading Example

const LazyImage = ({ src, alt }) => (
  <img loading="lazy" src={src} alt={alt} width="300" />
);

🔥 Now, images only load when they appear on the screen!

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

5️⃣ Split Code with React.lazy() & Suspense 🚀

Instead of loading everything at once, load only what the user needs using code-splitting.

✅ Solution: Use React.lazy() to dynamically load components.

❌ Without Code-Splitting (Slow)

import HeavyComponent from "./HeavyComponent";

⚠️ Issue: Loads even if not needed!

✅ With Code-Splitting (Faster)

const HeavyComponent = React.lazy(() => import("./HeavyComponent"));

const App = () => (
  <React.Suspense fallback={<div>Loading...</div>}>
    <HeavyComponent />
  </React.Suspense>
);

🔥 Now, HeavyComponent loads only when needed!

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

🚀 Final Thoughts

🔹 Summary of Performance Hacks

Optimization: — — — — Benefit:

React.memo() — — — — Prevents unnecessary re-renders
Keys & Virtualization — — — — Optimizes list rendering
useCallback() & useMemo() — — — — Prevents unnecessary function recreations
Code-Splitting with React.lazy() — — — — Reduces initial load time
Lazy Loading Images — — — — Improves loading speed

✅ Which of these techniques have you used before?
💬 Let me know in the comments! 😊