no-use-effect

Unnecessary useEffect calls trigger extra render cycles because they sync state that could be computed inline, forcing the component to render twice. This skill replaces those patterns with direct calculations to eliminate the redundant cycle.

To replace useEffect for deriving state, compute the derived value directly during render instead of syncing it through state updates. This skill provides five standardized replacement patterns for common use cases like state derivation.

You can enforce a no useEffect rule by configuring a no-restricted-syntax lint rule that bans direct useEffect usage. This skill sets up that enforcement to ensure consistent adoption of replacement patterns across your codebase.

A valid use case for useEffect on component mount is one-time external system synchronization. This skill provides an escape hatch via a useMountEffect utility specifically for this rare scenario while banning standard useEffect calls.

To handle data fetching without race conditions, replace useEffect with dedicated fetching patterns. This skill provides standardized replacement patterns for data fetching that avoid the race conditions inherent in useEffect-based fetching logic.