How can you optimize useEffect?

1. Use Dependency Array Correctly

The dependency array determines when the effect runs. Ensure you include only the dependencies that the effect truly depends on.

2. Use Memoization (useMemo or useCallback)

Memoize expensive calculations or functions passed as dependencies to prevent the effect from running unnecessarily.

3. Debounce or Throttle Expensive Operations

If the effect involves heavy operations like API calls triggered by frequent updates (e.g., typing in a search bar), debounce or throttle the updates.

useEffect(() => {
  const handler = setTimeout(() => {
    console.log("Debounced API call");
  }, 500);

  return () => clearTimeout(handler);
}, [searchTerm]);

4. Clean Up Side Effects

Always clean up subscriptions, timers, or event listeners to avoid memory leaks or stale data.

5. Use Conditional Logic Inside the Effect

Instead of conditionally calling useEffect, use conditional logic inside the effect to reduce unnecessary runs.

useEffect(() => {
  if (condition) {
    console.log("Effect runs only when condition is true");
  }
}, [condition]);

6. Use useLayoutEffect When Necessary

If your effect depends on layout changes (e.g., measuring DOM elements), use useLayoutEffect instead to prevent visual flickering.