react

Use a dedicated server-state layer for fetching, caching, deduplication, invalidation, retries, and loading/error states rather than raw effects. For raw fetch effects, use AbortController or equivalent cleanup to cancel requests on unmount.

Use a layered UI structure with primitives, shared composed components, route screens and layouts, plus a src/lib directory for shared non-React utilities. Keep reusable UI outside route files and coordinate across components with composition, context providers, or URL state.

Put shareable UI state in URL search params, including filters, search terms, pagination, sorting, selected tabs, and view modes. Keep local component state only for ephemeral UI like open menus, draft text, and transient animation state.

Validate input at the form boundary using schema-backed validation for non-trivial forms. Pair every input with accessible labels, descriptions, field-level errors, and submit state, keeping schemas close to the form or shared with the API contract.

Leaks happen when subscriptions, timers, network requests, and observers are not cleaned up. Always return cleanup functions, include complete effect dependencies, and use AbortController for fetch effects to cancel in-flight requests.