React Idioms and Patterns

To avoid data fetching anti-patterns in useEffect, manage server state using TanStack Query or SWR instead of local component state. This prevents brittle components by handling caching, synchronization, and query-level error UI robustly.

The best way to structure custom hooks and functional components is to use composition patterns with typed props and predictable defaults. Encapsulate reusable logic in hooks and always implement effect cleanup for subscriptions and abortable work.

You should apply memoization in React components only when profiling indicates measurable performance issues. Avoid premature optimization in functional components and rely on predictable composition patterns for maintainability.

Handle errors resiliently by implementing error boundaries for component-level crashes and query-level error UI for server state. Treat server state separately from global client state using TanStack Query or SWR to isolate failures.

Yes, this approach works for refactoring existing class components by replacing them with functional components. It leverages hook correctness and composition patterns to improve reliability and maintainability from the first iteration through production.

Manage effect cleanup by returning a cleanup function from your useEffect hook to cancel subscriptions and abortable work. This ensures reliable client state management and prevents memory leaks during component unmount.