skills.rest
jacob-balslev
jacob-balslevCOMMUNITY
Explore all skills by this author →
GitHub

hooks-patterns

Diagnose and correct React Hooks misuse in React 18+ components.

1|Updated May 6, 2026
Search Tags:#react#hooks#custom hooks#dependency arrays#useeffect#react 18#stale closure
One-click install
npx skills add https://github.com/jacob-balslev/skill-graph --skill hooks-patterns-jacob-balslev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hooks-patterns
Source: https://github.com/jacob-balslev/skill-graph/tree/main/marketplace/skills/hooks-patterns
Command: npx skills add https://github.com/jacob-balslev/skill-graph --skill hooks-patterns-jacob-balslev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

hooks-patterns helps you write correct React components by explaining the core invariants behind Hooks call order, dependency arrays, effects vs derived logic, and when memoization or custom hooks are truly warranted.

Core Features & Use Cases

  • Rules of Hooks as a compile-time invariant: prevents subtle slot-misalignment bugs caused by conditional or improperly nested hook calls.
  • Dependency array reasoning: fixes stale-closure, over-firing, and silent exhaustive-deps disables by matching closures to rerenders.
  • Effect selection and refactoring: distinguishes synchronization with external systems (effects) from computation during render (derived values).
  • Custom hook extraction criteria: guides when reuse, naming, or state-machine encapsulation earns a new hook.
  • useMemo/useCallback guardrails: reduces unnecessary overhead and avoids memoization that doesn’t actually protect anything.
  • React 18+ semantics coverage: accounts for automatic batching, concurrent rendering, Strict Mode double-invocation, and guidance around useEffectEvent-style separation.

Quick Start

Use hooks-patterns to review a component’s Hooks usage and rewrite the problematic parts so they follow the correct dependency and effect discipline.

Frequently Asked Questions about hooks-patterns

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

FAQPage Schema
Why does my React useEffect hook keep firing or causing stale closures?▼

Stale closures and over-firing effects happen when dependency arrays mismatch reactive values captured in the effect. Matching closure dependencies to rerenders fixes silent exhaustive-deps disables.

How do I know when to use useMemo and useCallback in React components?▼

UseMemo and useCallback are warranted only when reference-unstable deps cause child re-renders or effect re-firing. Applying memoization guardrails reduces overhead and identifies inappropriate memoization that protects nothing.

What is the difference between React useEffect and derived values during render?▼

Derived values are computations during render, while effects synchronize with external systems. Applying effect-vs-derived-value taxonomy prevents unnecessary state storage and improper effect usage.

Can I conditionally call React hooks inside an if statement?▼

Conditionally calling hooks violates the Rules of Hooks compile-time invariant, causing subtle slot-misalignment bugs. Hook call order must remain deterministic across renders to maintain component state alignment.

When should I extract a custom hook from my React component?▼

Extract a custom hook when reuse, naming clarity, or state-machine encapsulation earns a new hook. Custom hook extraction criteria guide when stateful logic warrants separation from the main component body.

Does React 18 Strict Mode change how useEffect behaves?▼

React 18 Strict Mode double-invokes effects to surface side-effect inconsistencies under concurrent rendering. Correct effect discipline accounts for automatic batching and ensures effects remain idempotent.

Related Skills

Explore More Software Engineering Skills→
xiaoniuge36xiaoniuge36
6

react-hooks

Create and utilize React Hooks with examples for state, effects, and performance.

Community
Intermediate
komlukkomluk
1

react-patterns

Enforce React 18 and TypeScript component and hook standards.

Community
Intermediate
CallMeLuigiv2CallMeLuigiv2

frontend-testing

Generate Vitest and React Testing Library tests for Dify UI components, hooks, and utilities.

Community
Intermediate
pvillegapvillega
23

wcag-audit

Detect WCAG violations via ESLint plugins and axe-core runtime scans.

Community
Advanced