#95 How do we stop re-rendering of child component when parent is updated in React?

In React, when a parent component updates, all its child components re-render by default — even if their props haven’t changed. To optimize performance and prevent unnecessary child re-renders, use the following strategies:

---

🔹 1. React.memo() (For Functional Components)

• Wrap your child component with React.memo() to memoize it.
• It prevents re-rendering unless props change.

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

✅ Use in Parent:

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

  return (
    <>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <Child name="Teekam" />
    </>
  );
}

✅ Now Child will not re-render when Parent state (count) changes unless name prop changes.

---

🔹 2. useCallback() for Callback Props

• Use useCallback in parent to prevent function recreation on each render.

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

🧠 Without useCallback, a new function reference is passed to the child on every render, causing unnecessary re-renders.

---

🔹 3. useMemo() for Expensive Props

• If passing a computed object/array, use useMemo to memoize it.

const data = useMemo(() => computeHeavyData(), []);

---

🔹 4. PureComponent (Class-based)

• For class components, use React.PureComponent which does shallow prop comparison.

class Child extends React.PureComponent {
  render() {
    return <div>{this.props.name}</div>;
  }
}

---

✅ Summary:

Technique	Usage Context
React.memo()	Functional child components
useCallback()	Memoize functions passed as props
useMemo()	Memoize computed values
PureComponent	Class components