Enforce consistent React hook and Context patterns in React 19 projects.
npx skills add https://github.com/recca0120/code-quest --skill react-hooks-recca0120
Please help me install this Agent Skill. Skill: react-hooks Source: https://github.com/recca0120/code-quest/tree/main/.claude/skills/react-hooks Command: npx skills add https://github.com/recca0120/code-quest --skill react-hooks-recca0120
This Skill solves the common React hook problems of unnecessary re-renders, stale closures, infinite loops, and noisy biome exhaustive-deps warnings by standardizing how custom hooks and Context providers should be structured in this project.
Apply the react-hooks guidelines to refactor a Context provider by splitting state vs actions, then fix any biome exhaustive-deps warnings in its effects using the documented dependency and ref patterns.
High-intent search queries and answers about installing and using this skill.
Fix biome useExhaustiveDependencies warnings by applying safe ref and callback patterns, using effects only for external synchronization, and deriving render-time data during render or with memoization to align dependencies correctly.
React Context providers cause unnecessary re-renders when state and actions share a single context. Split them into separate State and Actions contexts so action-only consumers don't re-render when state changes.
Extract a custom hook in React only when there is real duplication. Follow naming and return-value conventions, and favor stable references using useCallback and useMemo to prevent inefficient re-render patterns.
Test custom React hooks with @testing-library/react by using renderHook and act utilities. Never call hooks directly; always render them within a component testing wrapper to ensure correct execution behavior.
Yes, this React hooks guideline works for React 19 projects. It enforces correct dependency, ref, and callback patterns specifically aligned with biome useExhaustiveDependencies to prevent stale closures and infinite loops.
malinskibeniaminAutomate Biome linter setup with Ultracite preset for JavaScript and TypeScript projects.
quanngynxDiagnose and fix unnecessary React re-renders and expensive render-time work.
hivellmAutomates TypeScript project setup with strict mode, Vitest, ESLint, and CI/CD templates.
mouayadakelIdentify and fix React hook anti-patterns like missing dependencies and unnecessary re-renders.
