REACT Performance Tips

Optimizing React applications improves speed, responsiveness, and overall user experience. This guide covers various performance optimization techniques, including lazy loading, memoization, avoiding unnecessary re-renders, optimizing API calls, and more.

1. Use React.memo to Prevent Unnecessary Re-renders

React re-renders components whenever their parent component updates, even if the props have not changed. Wrapping components with React.memo prevents unnecessary re-renders.

Example: Using React.memo

import React from "react";

const MemoizedComponent = React.memo(function MyComponent({ count }) {
  console.log("Component re-rendered");
  return <p>Count: {count}</p>;
});

export default MemoizedComponent;

✔ Prevents re-renders if props remain unchanged
✔ Useful for functional components receiving props

2. Use useCallback to Optimize Function References

In React, inline functions create a new reference on each render, causing unnecessary re-renders. Use useCallback to memoize functions.

Example: Using useCallback

import React, { useState, useCallback } from "react";
import MemoizedComponent from "./MemoizedComponent";

function App() {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    setCount((prev) => prev + 1);
  }, []);

  return (
    <div>
      <MemoizedComponent count={count} />
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

export default App;

✔ Prevents unnecessary re-renders
✔ Ensures functions have stable references

3. Use useMemo to Optimize Expensive Computations

Expensive calculations re-run on every render, slowing down performance. Use useMemo to cache the result and recompute it only when dependencies change.

Example: Using useMemo

import React, { useState, useMemo } from "react";

function ExpensiveComponent({ num }) {
  const squaredNumber = useMemo(() => {
    console.log("Computing square...");
    return num * num;
  }, [num]);

  return <p>Squared Number: {squaredNumber}</p>;
}

export default ExpensiveComponent;

✔ Improves performance by caching expensive computations
✔ Runs only when dependencies change

4. Lazy Load Components with React.lazy

Instead of loading everything at once, load components only when needed using React.lazy and Suspense.

Example: Lazy Loading Components

import React, { Suspense } from "react";

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

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

export default App;

✔ Reduces initial load time
✔ Loads components only when required

5. Optimize React Rendering with Virtualized Lists

Rendering large lists slows down performance. Use react-window or react-virtualized for optimized rendering.

Example: Virtualized List Using react-window

npm install react-window

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

const Row = ({ index, style }) => <div style={style}>Item {index}</div>;

function App() {
  return (
    <List height={300} itemCount={1000} itemSize={35} width={300}>
      {Row}
    </List>
  );
}

✔ Renders only visible items
✔ Improves performance for large lists

6. Optimize API Calls with Debouncing and Throttling

Frequent API calls slow down performance. Use debouncing and throttling to limit API requests.

Example: Debouncing API Calls

import { useState } from "react";

function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const handler = setTimeout(() => setDebouncedValue(value), delay);
    return () => clearTimeout(handler);
  }, [value, delay]);

  return debouncedValue;
}

function SearchComponent() {
  const [query, setQuery] = useState("");
  const debouncedQuery = useDebounce(query, 500);

  useEffect(() => {
    if (debouncedQuery) {
      console.log("Fetching data for:", debouncedQuery);
    }
  }, [debouncedQuery]);

  return <input onChange={(e) => setQuery(e.target.value)} />;
}

✔ Reduces unnecessary API calls
✔ Improves performance of search inputs

7. Optimize Image Loading with Lazy Loading

Large images increase page load time. Use lazy loading to load images only when needed.

Example: Lazy Loading Images

function ImageComponent() {
  return <img src="large-image.jpg" loading="lazy" alt="Optimized Image" />;
}

✔ Reduces initial page load time
✔ Loads images only when they appear in the viewport

8. Avoid Inline Functions and Objects in JSX

Inline functions and objects cause unnecessary re-renders because they create a new reference on every render.

❌ Bad Example: Causes Re-renders

<button onClick={() => console.log("Clicked")}>Click Me</button>

✅ Good Example: Optimized with useCallback

const handleClick = useCallback(() => console.log("Clicked"), []);
<button onClick={handleClick}>Click Me</button>;

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

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

const ThemeContext = React.createContext();
const AuthContext = React.createContext();

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState("light");
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}