react-hooks-effects-review

Review React hooks, Effects, and refs for stale closures, cleanup, and dependency bugs.

2|Updated May 6, 2026
One-click install
npx skills add https://github.com/bpcakes/jig-skills --skill react-hooks-effects-review-bpcakes
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react-hooks-effects-review
Source: https://github.com/bpcakes/jig-skills/tree/main/plugins/jig-typescript/skills/react-hooks-effects-review
Command: npx skills add https://github.com/bpcakes/jig-skills --skill react-hooks-effects-review-bpcakes

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? React lifecycle bugs such as stale closures, missing Effect cleanup, incorrect dependency arrays, and render-impurity issues often pass TypeScript checks and code review unnoticed, causing crashes, memory leaks, and data races in production. ## Core Features & Use Cases - Lifecycle-focused review: Inspects useEffect, useMemo, useCallback, useRef, custom hooks, and external store integrations for concrete defects with traced consequences. - Severity-ranked findings: Reports Critical/High/Medium/Low findings with file locations, evidence, and minimal fix guidance, preferring Effect removal over dependency hacks. - Use Case: After changing a data-fetching component with subscriptions and timers, run this review on the git diff to catch a missing cleanup function and a stale closure reading outdated props before merging. ## Quick Start Ask the agent to review your current working changes for React hooks and Effects lifecycle issues and report findings with file locations without editing code.

Frequently Asked Questions about react-hooks-effects-review

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

FAQPage Schema
How do I review React useEffect code for bugs?

Scope the review to your changed files or git diff, then classify each Effect by what external system it synchronizes with. Check dependency arrays for missing reactive values, verify cleanup mirrors setup, and confirm no side effects run during render.

What causes stale closures in React hooks?

Stale closures occur when delayed callbacks like setTimeout, promises, or subscriptions read values captured from an older render. Fixes include functional state updates, complete dependency arrays, useEffectEvent where supported, or abort/ignore guards for async races.

Does this review work with React Server Components and SSR?

Yes, the review records whether the project uses SSR, Server Components, Strict Mode, or React Compiler before analyzing. It flags browser-only API reads during SSR render and hydration-unsafe nondeterministic output like Date.now or Math.random.

When should I not use a React hooks lifecycle review?

Skip it when changes involve only styling, static markup, TypeScript types, routing config, or server-only code with no hook or render lifecycle surface. The review targets lifecycle, timing, and synchronization bugs, not general style.

Why does my useEffect cause an infinite render loop?

Loops happen when an Effect synchronously sets state it also lists as a dependency, or writes values that change unstable dependencies. Fixes include deriving values during render, splitting overloaded Effects, or moving logic into event handlers.