Q346- Explain various optimization techniques in React.

React optimization is about reducing unnecessary re-renders, improving rendering speed, and keeping the UI responsive—especially in large applications.

---

1️⃣ Prevent Unnecessary Re-renders

✅ React.memo

Prevents re-render if props don’t change.

const Button = React.memo(({ onClick }) => {
  console.log("Rendered");
  return <button onClick={onClick}>Click</button>;
});

📌 Use for pure presentational components

---

✅ PureComponent (Class Components)

Shallowly compares props & state.

class MyComp extends React.PureComponent {}

---

2️⃣ Memoize Expensive Calculations

✅ useMemo

Caches computed values.

const total = useMemo(() => expensiveCalc(items), [items]);

📌 Use when calculation is heavy and inputs change rarely.

---

✅ useCallback

Caches function references.

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

📌 Prevents child re-renders due to new function identity.

---

3️⃣ Code Splitting & Lazy Loading

✅ React.lazy + Suspense

Loads components only when needed.

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

<Suspense fallback={<Loader />}>
  <Dashboard />
</Suspense>

📌 Improves initial page load time.

---

4️⃣ Optimize State Management

✅ Avoid Overusing Global State

• Keep state as close as possible to where it’s used.
• Avoid unnecessary Context updates.

---

✅ Split State

Instead of:

const [state, setState] = useState({ a: 1, b: 2 });

Prefer:

const [a, setA] = useState(1);
const [b, setB] = useState(2);

📌 Reduces re-render scope.

---

5️⃣ List Rendering Optimizations

✅ Use Stable key

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

❌ Avoid array index as key.

---

✅ Virtualization (Large Lists)

Use libraries like:

• react-window
• react-virtualized

📌 Renders only visible items.

---

6️⃣ Event & Effect Optimizations

✅ Debounce / Throttle Events

For search, scroll, resize.

debounce(searchFn, 300);

---

✅ Optimize useEffect

• Correct dependency array
• Cleanup side effects
• Avoid unnecessary effects

useEffect(() => {
  fetchData();
}, []); // run once

---

7️⃣ Avoid Inline Objects & Functions in JSX

❌ Bad:

<Component style={{ color: "red" }} />

✅ Better:

const style = useMemo(() => ({ color: "red" }), []);

---

8️⃣ Concurrent Features (React 18+)

✅ Automatic Batching

Multiple state updates → single re-render

---

✅ startTransition

Mark non-urgent updates.

startTransition(() => {
  setResults(filteredData);
});

📌 Keeps UI responsive during heavy updates.

---

9️⃣ Use Production Build

npm run build

✔ Minified
✔ Faster
✔ No dev warnings

---

🎯 Short Interview Answer

React optimization involves preventing unnecessary re-renders using React.memo, useMemo, and useCallback, splitting code with lazy loading, optimizing state management, virtualizing large lists, and using React 18 features like automatic batching and transitions.

---

⭐ One-line summary

Optimize React by reducing re-renders, memoizing wisely, splitting code, and managing state efficiently.