react-effects

Use useEffect in React components for synchronizing with external systems, including data fetching on mount, establishing subscriptions, and handling DOM interactions. Avoid it for transforming data or managing state derived from props to prevent unnecessary re-renders.

Common useEffect anti-patterns include using it for derived state, chaining effects to propagate changes, and missing cleanup functions. These anti-patterns cause cascading re-renders and memory leaks in typical React applications.

Implement useEffect cleanup by returning a function from the effect callback to cancel active subscriptions, remove event listeners, and clear timers. Reliable cleanup practices ensure predictable component lifecycles and prevent memory leaks during unmounting.

Yes, useEffect works with React hooks for data fetching on component mount. Apply decision-tree guidance to fetch external data only when necessary, ensuring correct dependency arrays are specified to avoid duplicate network requests and unnecessary side effects.

Your useEffect causes infinite re-renders when updating state inside the effect without proper dependency boundaries. Apply recommended patterns by verifying dependency arrays and avoiding state updates that trigger the same effect repeatedly.