react-useeffect-avoid

Avoid useEffect for pure React logic like derived state, state resets, and list filtering to prevent double renders, stale UI, and concurrency tearing. Use render-time calculations, event handlers, or key-based remounting instead.

Fix useEffect anti-patterns by converting them to render-time calculations or moving side effects into event handlers. This eliminates cascading updates and transient state bugs during component rendering.

Use useSyncExternalStore for external subscriptions to ensure concurrency safety. This prevents tearing and provides a more reliable alternative to managing third-party integrations with useEffect.

Reset component state using key-based remounting instead of useEffect. Changing the key prop remounts the component, automatically clearing transient state and avoiding stale UI bugs.

Yes, this approach applies to form refactoring and code review. It helps eliminate transient state bugs in forms and identifies unnecessary effects during code reviews to improve React performance.

useEffect causes stale UI and concurrency tearing when misused for local logic because it triggers cascading updates and double renders. Moving logic to render-time or event handlers prevents these issues.