1. Use Functional Components Over Class Components

Functional components with React Hooks are simpler, faster, and easier to manage than class components.

✅ Why?

• Less boilerplate

• Better performance (no overhead of this binding)

• Easier to read and maintain

❌ Old Class Component

class MyComponent extends React.Component {
  render() {
    return <h1>Hello, React!</h1>;
  }
}

✅ Modern Functional Component

const MyComponent = () => <h1>Hello, React!</h1>;

🔹 Use Hooks like useState and useEffect to manage state and lifecycle instead of class methods.

2. Optimize Re-Renders with React.memo()

Unnecessary re-renders can slow down your React app. Use React.memo() to prevent re-rendering when props haven’t changed.

❌ Without React.memo() (Re-renders every time)

const Button = ({ label }) => {
  console.log("Button rendered");
  return <button>{label}</button>;
};

✅ Optimized with React.memo()

const Button = React.memo(({ label }) => {
  console.log("Button rendered");
  return <button>{label}</button>;
});

🔹 Now, Button will only re-render if label changes, improving performance.

3. Use the useCallback and useMemo Hooks

✅ Use useCallback to Optimize Functions

useCallback ensures a function is not re-created on every render.

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

✅ Use useMemo for Expensive Calculations

useMemo caches heavy computations to avoid re-executing on every render.

const filteredItems = useMemo(() => {
  return items.filter(item => item.active);
}, [items]);

🔹 Best Practice: Use useCallback for functions and useMemo for values to optimize re-renders.

4. Use Lazy Loading with React.lazy()