Reviews React code for incorrect usage of the useEffect hook.
npx skills add https://github.com/mnadalc/dotfiles --skill dont-use-use-effect
Please help me install this Agent Skill. Skill: dont-use-use-effect Source: https://github.com/mnadalc/dotfiles/tree/main/.ai/skills/react-dont-use-use-effect Command: npx skills add https://github.com/mnadalc/dotfiles --skill dont-use-use-effect
This Skill helps developers avoid common pitfalls and anti-patterns when using React's useEffect hook, ensuring more efficient, maintainable, and bug-free React applications.
useEffect for derived state, event handling, or state resetting.useEffect is appropriate for synchronizing with external systems.useEffectEvent, and handling race conditions.useEffect hooks, ensuring they are correctly implemented and that no better alternatives exist.Review the provided React code snippet for any incorrect usage of the useEffect hook.
High-intent search queries and answers about installing and using this skill.
Avoid using useEffect for derived state, event handling, or state resetting. The useEffect hook should specifically be used for synchronizing your React components with external systems, not for managing internal component logic.
To manage race conditions in useEffect, you need to implement proper cleanup functions and follow best practices for dependency arrays. This ensures your React components handle asynchronous data fetching safely without conflicting state updates.
The best way to handle useEffect cleanup is to return a cleanup function from the hook to properly unsubscribe from external systems. Enforcing correct dependency arrays alongside this cleanup prevents memory leaks and ensures proper component synchronization.
Yes, useEffectEvent can be used to handle event logic outside of the standard useEffect lifecycle. This approach helps separate event handling from external system synchronization, reducing unnecessary effect re-runs and improving component performance.
Your useEffect likely runs infinitely due to incorrect dependency arrays or using it for derived state instead of external system synchronization. Reviewing dependency arrays and removing state-derived logic from effects resolves these performance issues.
xalixilaxIdentify and prevent misuse of useEffect patterns in React code.
gimeneteAnalyze React useEffect hooks and refactor unnecessary side effects.
miounet11Analyze React and Next.js projects for best practice violations.
vinaykumarvkScan codebases for security flaws, quality issues, and accessibility violations.