One thing worth explaining clearly: useEffect wasn’t designed to be a data-fetching mechanism. It runs after the component renders, so you get double renders in Strict Mode during development.

It’s tied to the lifecycle, so the fetch runs again whenever dependencies change often unintentionally. You have to manage race conditions, abort signals, stale state, and boilerplate for loading and errors manually.

Multiple components can trigger duplicate fetches for the same resource. This is precisely why libraries like TanStack Query exist.

1) Stop Overusing useEffect for Fetching

useEffect is great for side-effects. It is not a substitute for a cache, background revalidation, or deduplication. Fetching directly in useEffect leads to repeated requests, tightly couples UI to fetch logic, and makes cancellation/error handling boilerplate.

What to do Instead:

Use TanStack Query (React Query) to fetch and cache server data. It handles dedupe, background refetch, caching, invalidation, retries, and prefetching.

Example:

// api.ts
import axios from "axios";
export const fetchTodo = (id: string) =>
  axios.get(`/api/todos/${id}`).then(res => res.data);

// TodoComponent.tsx
import { useQuery } from "@tanstack/react-query";
import { fetchTodo } from "./api";

export default function Todo({ id }: { id: string }) {
  const { data, error, isLoading } = useQuery(["todo", id], () => fetchTodo(id), {
    staleTime: 1000 * 60, // 1 minute
    cacheTime: 1000 * 60 * 5,
    refetchOnWindowFocus: false
  });

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Uh oh — can't load.</div>;

  return <div>{data.title}</div>;
}

No useEffect, no manual abort controller, no duplicated loading states across components. TanStack Query does the heavy lifting.

Don’t just head straight to the tech stack to explore the best tools and patterns to optimize React app performance; categorize the problem first, since multiple key factors impact the React app.

• Unnecessary use of Global State

• Excessive use of JS in the initial

• Lengthy long list

• Unnecessary re-rendering

When all these things occur, it's difficult to control the side effects. The tools you choose are simply ways to avoid those costs.

Why State Management is Needed and Where it Fits

Once you outgrow basic context, you need a system that lets components subscribe only to the parts of state they care about. Zustand does that without a heavy setup. It’s small, easy to read, selector-based, and doesn’t require reducers or action creators. It works exceptionally well for UI concerns such as modals, sidebars, temporary filters, selected IDs, and layout preferences.

Reasons it performs well:
• Components subscribe to specific slices instead of the whole store
• No large context value being replaced
• Minimal boilerplate makes state updates predictable
• Minimal API surface, so it’s hard to misuse

Zustand isn’t the only choice to optimize React app frontend. For heavy apps, Redux Toolkit is also worth utilizing, as it offers a structured approach. Apart from this, if you’re looking for something highly polished with sticky updates, try Jotai or Recoil.

For flow-heavy apps with multiple possible states, XState gives you deterministic behavior. And if the global state is tiny and stable, React’s own context is still enough.

Zustand is simply the comfortable middle: small, fast, ergonomic, and significant for UI-level global state. 

2) Use Zustand / Redux for Local/UI State Only

Zustand is tiny and significant for global UI concerns (modals, theme, small form state). Don’t mix server data and optimistic caches here; keep that in TanStack Query.

Example:

// uiStore.ts
import create from "zustand";

type UIState = {
  sidebarOpen: boolean;
  toggleSidebar: () => void;
  searchQuery: string;
  setSearchQuery: (q: string) => void;
};

export const useUIStore = create<UIState>((set) => ({
  sidebarOpen: false,
  toggleSidebar: () => set((s) => ({ sidebarOpen: !s.sidebarOpen })),
  searchQuery: "",
  setSearchQuery: (q) => set({ searchQuery: q })
}));

Use this in components without causing server-state weirdness.

3) Reduce Unnecessary Re-renders

A price calculator that recomputes every keystroke slows the entire form. Wrapping the computation in useMemo keeps the UI responsive without touching the logic.

Too many renders are the silent CPU killer. A few small rules:

• Wrap heavy components with React.memo.
  
  

• Memoize handlers with useCallback when passing to memoized children.
  
  

• Memoize expensive calculations with useMemo, or better, move calculations out of render.
  
  

• Avoid inline object/array literals in props.

Example: parent→child render control

// Child.tsx
const Child = React.memo(({ onClick, data }: { onClick: () => void, data: any }) => {
  console.log("Child render");
  return <button onClick={onClick}>{data.label}</button>;
});

// Parent.tsx
function Parent({ items }) {
  // BAD: inline function and inline object -> Child re-renders every parent render
  // GOOD: memoize
  const handler = useCallback(() => { /* do something */ }, []);
  const stableData = useMemo(() => ({ label: "Click" }), []);

  return <Child onClick={handler} data={stableData} />;
}

React.memo only helps if props are stable. Make them stable.

4) Replace Repeated Logic with Custom Hooks or HOCs

If you’re copy/pasting logic across components, make a hook or an HOC. Hooks are usually better for composability.

Example hook: usePaginatedQuery

usePaginatedQuery
import { useInfiniteQuery } from "@tanstack/react-query";

export function usePaginatedQuery(key, fetchFn) {
  return useInfiniteQuery(key, ({ pageParam = 1 }) => 
    fetchFn(pageParam), {
    getNextPageParam: (lastPage) => lastPage.nextPage ?? false
  });
}

Use across list components; never repeat pagination code.

5) Optimize SVGs: Inline and Clean Them

SVGs are heavy but can’t unlock their full potential. Optimizing them (SVGO) and wiping metadata that is not required will shift the load. Also, when we convert them into React components, you get control over props (fill, stroke) and can eliminate extra network requests.

Example: SVG as Component

// IconCheck.tsx (generated by svgr)
export default function IconCheck(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg viewBox="0 0 24 24" width="24" height="24" {...props}>
      <path d="M20 6L9 17l-5-5" fill="none" stroke="currentColor" strokeWidth="2" />
    </svg>

Import and style with CSS variables or Tailwind classes. Inline SVGs mean no extra request and easy theming.

6) Modular Components & Avoid Repetition

Single Responsibility components should do one thing. Compose them. This reduces duplicate bundle sizes, simplifies memoization, and accelerates development.

Example:

/components
  /ui
    Button.tsx
    Icon.tsx
  /todo
    TodoItem.tsx
    TodoList.tsx
/hooks
  useTodos.ts
/pages
  TodosPage.tsx

Small components are easier to lazy-load too.

7) Code-splitting and Lazy Loading

Don’t ship the gallery component to users who open the settings page. Use React.lazy + Suspense or route-level splitting with your router.

Example: route-level dynamic import (React Router)

import { lazy, Suspense } from "react";
const Heavy = lazy(() => import("./HeavyComponent"));

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

Prefetch meaningful chunks when you can (on hover or in useEffect when the route link appears).

8) Virtualize Long Lists

Rendering thousands of rows is unnecessary. Instead, practice virtualization (react-window or react-virtual).

Example:

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

function BigList({ items }) {
  return (
    <List
      height={600}
      itemCount={items.length}
      itemSize={50}
      width={"100%"}
    >
      {({ index, style }) => (
        <div style={style}>
          {items[index].title}
        </div>
      )}
    </List>
  );
}

9) Debounce, Throttle, and Avoid Expensive Reads during Scroll

Input handlers, resize, and scroll events can crush the main thread if unthrottled. Use requestAnimationFrame or debounce/throttle.

Example:

function useDebouncedValue<T>(value: T, delay = 300) {
  const [state, setState] = React.useState(value);
  React.useEffect(() => {
    const id = setTimeout(() => setState(value), delay);
    return () => clearTimeout(id);
  }, [value, delay]);
  return state;
}

10) Prefetch and Smart Caching with TanStack Query

Prefetch on hover or when a link becomes visible to decrease perceived latency. Use optimistic updates for mutations that are instant-feeling.

Example:

// prefetch on mouse enter
const queryClient = useQueryClient();
function onMouseEnter(id) {
  queryClient.prefetchQuery(["todo", id], () => fetchTodo(id));
}

11) Measure, Don’t Guess

No need to make assumption 

Use Lighthouse, React DevTools profiler, and the network tab. Optimize what the profiler shows. If you throw micro-optimizations at code without measuring, you’ll waste time.

12) Small but High-impact Practices

• Bundle analysis: remove big deps or lazy-load them.

• Tree-shake: import specific functions, not whole libs.

• HTTP caching and headers: set long cache for immutable assets and use cache-busting filenames.

• Critical CSS: ship above-the-fold styles first.

• Server-Side Rendering (SSR) / Edge: for first contentful paint improvements where appropriate.

• Image formats: use AVIF/WebP; use responsive srcset; lazy-load non-critical images.

• Avoid large polyfills: ship them only where needed.

Sharing the example in next section for better understanding.