react-useeffect-avoid

Avoid useEffect for derived state, state resets on prop changes, user-triggered actions, and list filtering. Calculate derived values during render, use the key prop for resets, and handle user actions in event handlers instead.

Use the key prop to remount the component with fresh state when the prop changes, such as <UserForm key={userId} />. This avoids the stale-data flash and double render caused by resetting state inside useEffect.

Use data libraries like React Query or SWR, or React 19's use API to read promises directly during render. These handle caching, deduplication, and loading states without manual effect management.

Effects run after the initial render, so setting state inside useEffect triggers a second render cycle. Calculating values during render or handling logic in event handlers produces a single render with immediate UI updates.

Yes, useSyncExternalStore is the correct hook for subscribing to browser APIs and external stores. It prevents tearing bugs during concurrent rendering that occur with the useState plus useEffect subscription pattern.

Use useEffect only for synchronizing with external systems: websocket subscriptions, timers with cleanup, third-party library integration, document title changes, and analytics that fire after rendering completes.