react-useeffect

Use useEffect in React components to synchronize external systems, manage subscriptions, and handle data fetching. You should avoid it for derived state or logic that belongs in event handlers, favoring safer alternatives like useMemo.

Common React useEffect anti-patterns include memory leaks, stale closures, and unnecessary data fetching. Fix them by implementing proper cleanup functions, preferring derived state, and moving logic to event handlers where appropriate.

Write a useEffect cleanup function by returning a function from the effect body to unsubscribe from external systems. This prevents memory leaks by ensuring subscriptions and event listeners are safely removed during component lifecycle unmounting.

You can use useEffect for data fetching in React, but review safer alternatives first. Analyze external systems involved and outline a minimal refactor plan, as derived state or dedicated data fetching libraries often provide better component lifecycle optimization.

Refactor React useEffect by identifying logic that updates state based on props or prior state, then replacing it with derived state variables or useMemo. This prevents stale closures and optimizes component rendering without triggering unnecessary effectful logic.

Review React component logic by analyzing useEffect usage to identify best practices and anti-patterns. Start by listing external systems involved, checking for proper cleanup, and outlining a minimal refactor plan for safer subscriptions and data fetching.