react-hooks

Detect React hook violations and guide correct useEffect, useMemo, and useCallback patterns.

47|7|Updated Dec 21, 2025
One-click install
npx skills add https://github.com/salavender/antigravity-compound-engineering-plugin --skill react-hooks-salavender
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react-hooks
Source: https://github.com/salavender/antigravity-compound-engineering-plugin/tree/main/skills/react-hooks
Command: npx skills add https://github.com/salavender/antigravity-compound-engineering-plugin --skill react-hooks-salavender

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React hook usage often suffers from rules-of-hooks violations, missing dependencies, and inconsistent hook ordering, which leads to subtle bugs and unstable UI.

Core Features & Use Cases

  • Rules of Hooks violations: detects early returns and conditional hook calls to enforce consistent initialization.
  • Dependency management: identifies missing or stale dependencies in useEffect/useMemo/useCallback.
  • Hook ordering and context patterns: promotes stable hook sequences and safe use of context to avoid unnecessary re-renders.
  • Custom hook extraction: guides safe extraction of reusable logic into custom hooks for reuse.

Quick Start

Audit your React components and apply the patterns above to fix hook violations in the first pass.

Frequently Asked Questions about react-hooks

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I fix React hooks violations caused by early returns and conditional calls?

Fix React hooks violations by auditing components for early returns and conditional hook calls, then enforcing consistent initialization sequences. This ensures stable hook ordering and prevents subtle bugs across your front-end React project.

How do I identify missing or stale dependencies in useEffect, useMemo, and useCallback?

Identify missing or stale dependencies in useEffect, useMemo, and useCallback by auditing your hook usage patterns. Correct dependency management stabilizes hooks and prevents unnecessary re-renders in multi-component React applications.

What is the best way to extract custom hooks for reusable logic in a React codebase?

Extract custom hooks by guiding safe refactoring of reusable logic from your components. This pattern enforcement isolates context usage and promotes stable hook sequences for safe reuse across moderate-size React projects.

Can I enforce rules of hooks and safe context patterns in a moderate-size React project?

You can enforce rules of hooks and safe context patterns in moderate-size React projects by applying static analysis and pattern enforcement. This stabilizes hook sequences and avoids unnecessary re-renders during multi-component context usage.