🚀 Boost React Performance: Reduce Re-renders & Optimize State

React apps are powerful — but performance bottlenecks appear when components re-render unnecessarily or when state is managed poorly.
Here’s a simple guide to help you optimize your React apps for speed and efficiency.

---

1️⃣ Minimize Re-renders with React.memo

React re-renders components whenever props/state change — even if not required.

👉 Solution: Wrap components in React.memo.

import React, { memo } from "react";

const ExpensiveComponent = memo(({ data }) => {
  console.log("Rendered!");
  return <div>{data}</div>;
});

export default ExpensiveComponent;

✅ Now it only re-renders when data changes.

---

2️⃣ Optimize Functions with useCallback

Each render creates new function references, causing child components to re-render.

👉 Wrap event handlers in useCallback.

import { useState, useCallback } from "react";

const Parent = () => {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => setCount(count + 1), [count]);

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

const Child = memo(({ onClick }) => (
  <button onClick={onClick}>Click</button>
));

✅ Prevents unnecessary renders of Child.

---

3️⃣ Use useMemo for Expensive Computations

Avoid recalculating values that don’t change often.

👉 Use useMemo.

import { useMemo } from "react";

const ExpensiveComponent = ({ data }) => {
  const computedValue = useMemo(() => expensiveFunction(data), [data]);
  return <div>{computedValue}</div>;
};

✅ Saves performance by caching values.

---

4️⃣ Avoid Unnecessary State Updates

Placing state in the wrong place can cause wider re-renders.

❌ Bad (moves re-renders to parent):

const Parent = () => {
  const [isOpen, setIsOpen] = useState(false);
  return <Child isOpen={isOpen} />;
};

✅ Better (keep state local):

const Child = () => {
  const [isOpen, setIsOpen] = useState(false);
  return <button onClick={() => setIsOpen(!isOpen)}>Toggle</button>;
};

✅ State should live as close to where it’s used as possible.

---

🎯 Key Takeaway

Optimizing React isn’t about premature optimization — it’s about preventing wasteful re-renders.

✔ Use React.memo for pure components
✔ Use useCallback to stabilize functions
✔ Use useMemo to cache computations
✔ Keep state local to the component

🚀 With these tricks, your React app will run faster, smoother, and more efficient.

---

💬 What’s your go-to method for improving React performance? Let’s share best practices 👇