react-hooks

salavender's avatarfrom salavender

Resolves React hook violations (rules of hooks, useEffect dependencies, hook ordering).

⭐29stars🔀7forks📁View on GitHub🕐Updated Dec 27, 2025
[Debugging]

When & Why to Use This Skill

The React Hooks skill is a specialized tool designed to automatically identify and resolve React hook violations within your codebase. It ensures strict adherence to the 'Rules of Hooks,' fixes complex useEffect dependency issues, and corrects hook ordering problems. By optimizing Context API patterns and assisting in custom hook extraction, this skill helps developers eliminate infinite loops, prevent stale closures, and improve overall React application performance and stability.

Use Cases

  • 1. Fixing Rules of Hooks Violations: Automatically refactors code where hooks are called conditionally or after early returns to ensure consistent execution order.
  • 2. Resolving useEffect Dependency Issues: Identifies and adds missing dependencies or removes unnecessary ones to prevent stale data bugs and infinite rendering loops.
  • 3. Optimizing Context API Performance: Detects unmemoized context values that cause global re-renders and applies useMemo patterns to stabilize the component tree.
  • 4. Refactoring and Custom Hook Extraction: Safely migrates complex logic from components into reusable custom hooks while maintaining proper hook lifecycle standards.
  • 5. Debugging Hook-Related Crashes: Analyzes browser console errors related to hook mismatches and provides immediate code corrections based on established React patterns.
namereact-hooks
descriptionResolves React hook violations (rules of hooks, useEffect dependencies, hook ordering).

React Hooks Skill

Handles common React hook patterns and violations across the codebase.

Capabilities

  • Rules of Hooks violations: Early returns before hook calls, conditional hooks
  • useEffect dependency issues: Missing/stale dependencies, infinite loops
  • Hook ordering problems: Hooks called in conditional order, inconsistent hook sequence
  • Context hook patterns: Proper use of useContext, avoiding unnecessary context re-renders
  • Custom hook extraction: Safe creation of custom hooks for reusable logic

Key Patterns

Pattern 1: Early Returns Before Hooks (⚠️ FATAL)

// WRONG - return before hooks
if (!isAuthenticated) {
  return <Login />;  // ❌ Hook call below is unreachable sometimes
}
const user = useUser();  // VIOLATION

// RIGHT - hooks always execute
const user = useUser();
if (!isAuthenticated) {
  return <Login />;
}

Pattern 2: useEffect Dependency Problems

// WRONG - missing dependency
const context = useContext(MyContext);
useEffect(() => {
  doSomething(context);
}, []);  // ❌ Missing `context`

// RIGHT - include all dependencies
useEffect(() => {
  doSomething(context);
}, [context]);

Pattern 3: Infinite Loop from Context Object

// WRONG - context object changes on every render
const Provider = ({ children }) => {
  const value = { user: currentUser };  // New object every render
  return (
    <MyContext.Provider value={value}>  // ❌ Causes infinite loop
      {children}
    </MyContext.Provider>
  );
};

// RIGHT - memoize context value
const Provider = ({ children }) => {
  const value = useMemo(() => ({ user: currentUser }), [currentUser]);
  return (
    <MyContext.Provider value={value}>
      {children}
    </MyContext.Provider>
  );
};

Debugging Workflow

  1. Identify the error: Check browser console for hook violations.
  2. Find the violation: search for early returns or dependency issues.
  3. Locate the component: Grep for hook name or variable.
  4. Apply fix: Use the patterns above as templates.
  5. Test: Re-render and check console.

Instrumentation

./scripts/log-skill.sh react-hooks