Q108- How to optimize performance in a large React application?

In large React apps, performance issues often arise due to unnecessary re-renders, heavy computations, or large bundles. Optimization can be done at multiple levels: component, state management, and build.

---

1️⃣ Prevent Unnecessary Re-renders

• Use React.memo for functional components:

const Child = React.memo(({ value }) => {
  console.log("Child rendered");
  return <div>{value}</div>;
});

• Use useCallback for memoizing functions:

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

• Use useMemo for expensive calculations:

const result = useMemo(() => computeHeavyValue(data), [data]);

---

2️⃣ Code Splitting and Lazy Loading

• Split large bundles into smaller chunks using React.lazy and Suspense:

const Dashboard = React.lazy(() => import("./Dashboard"));
<Suspense fallback={<div>Loading...</div>}>
  <Dashboard />
</Suspense>

• Route-based splitting ensures only the needed code is loaded.

---

3️⃣ Optimize Lists and Rendering

• Use key prop correctly in lists
• Avoid inline object/array creation in props (causes re-renders)
• For large lists, use windowing libraries like react-window or react-virtualized:

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

---

4️⃣ Avoid Anonymous Functions in JSX

// Bad: causes re-renders
<button onClick={() => doSomething(item)}>Click</button>

// Good: use useCallback
const handleClick = useCallback(() => doSomething(item), [item]);
<button onClick={handleClick}>Click</button>

---

5️⃣ Optimize State Management

• Lift state only when necessary
• Use local state for component-specific data
• Use Redux or Context selectively for global state
• Avoid frequent deep updates on large objects/arrays

---

6️⃣ Debounce / Throttle Expensive Events

• For search input, scrolling, or resize events:

import { debounce } from "lodash";
const handleSearch = debounce((query) => fetchResults(query), 300);

---

7️⃣ Optimize Images and Assets

• Use optimized image formats (WebP)
• Lazy load images with loading="lazy"
• Minify CSS/JS bundles

---

8️⃣ Server-Side Rendering (SSR) or Static Rendering

• Use Next.js or SSR to render pages on the server
• Reduces initial load time and improves SEO

---

9️⃣ Performance Monitoring

• Use React DevTools Profiler to identify slow components
• Use Chrome Lighthouse or Web Vitals for metrics

---

⚡ In short:

Optimize React apps by memoizing components/functions, splitting code, windowing large lists, debouncing expensive operations, and monitoring performance. Combine good state management and SSR/lazy loading for scalable, fast apps.