Avoid Re-render Hell in React (Use Memoization Wisely)

React re-renders components whenever state or props change, but sometimes it re-renders more than necessary.

A common mistake is creating new objects or functions on every render. For example, defining an object inside a component will create a new reference each time, which can trigger unnecessary updates in child components.

To optimize this, use useMemo for values and useCallback for functions.

Example:

const data = useMemo(() => ({ name: "John" }), []);

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

This helps React avoid unnecessary re-renders and improves performance.

However, do not overuse memoization. Use it only when you notice performance issues or when passing props to child components that depend on reference equality.