Identify and correct unnecessary useEffect usage in React components.
npx skills add https://github.com/jonmumm/skills --skill dont-use-use-effect-jonmumm
Please help me install this Agent Skill. Skill: dont-use-use-effect Source: https://github.com/jonmumm/skills/tree/main/dont-use-use-effect Command: npx skills add https://github.com/jonmumm/skills --skill dont-use-use-effect-jonmumm
Avoid unnecessary useEffect in React components, helping you prevent extra renders, stale closures, race conditions, and harder-to-reason-about code.
The golden rule: Effects are for synchronizing with external systems (DOM APIs, timers, websockets, third-party widgets). If the work you're doing is a response to a user event, or can be calculated from existing state/props, you don't need an Effect.
Refactor React components to minimize useEffect by deriving state in render, moving event-driven logic to handlers, and using data-fetching libraries.
High-intent search queries and answers about installing and using this skill.
To avoid unnecessary useEffect in React components, derive state during render, move event-driven logic to explicit handlers, and use data-fetching libraries instead of effect-based data loading.
You should not use useEffect when responding to user events or calculating values from existing state and props. useEffect is specifically for synchronizing with external systems like DOM APIs, timers, and websockets.
The best way to fetch data without useEffect is using dedicated data-fetching libraries like TanStack Query or SWR, which prevent race conditions and stale closures better than raw effect-based data loading.
Derive state during render by calculating values directly from existing state and props. This eliminates unnecessary state variables and effects, preventing extra renders and harder-to-reason-about code.
Handle external subscriptions in React by using the useSyncExternalStore hook. This provides a more reliable way to subscribe to external systems than managing subscriptions manually inside useEffect.
Extra renders and stale closures often happen when using useEffect for state derivation or event-driven logic. Refactoring to derive state in render and moving logic to event handlers resolves this.
einja-incEnforce TypeScript/React naming conventions, import orders, and linting standards.
saajunaidIdentify correct useEffect usage and safer React alternatives for side effects.
ihj04982Calculate derived state directly during React render phase.
gimeneteAnalyze React useEffect hooks and refactor unnecessary side effects.
