react-state-data-flow-review

Reviews React state ownership and data flow for drift, invalid async states, and cache inconsistencies.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? React codebases often accumulate duplicated state, contradictory loading flags, and stale cache copies that cause drift between the UI and its data sources. This Skill reviews React + TypeScript changes to find concrete state ownership and data-flow defects before they reach production. ## Core Features & Use Cases - Source-of-truth analysis: Identifies competing ownership between props, local state, URL params, query caches, and external stores. - Async state modeling checks: Flags loose isLoading/error/data flag combinations and recommends discriminated unions or state machines. - Server/client and cache flow review: Detects duplicated server data, missing optimistic rollback, and stale cache invalidation in frameworks with loaders, actions, or React Server Components. - Use Case: After refactoring a checkout form that mixes React Query cache data with local useState copies, run this review on the diff to confirm there is one owner per value and that optimistic updates have rollback paths. ## Quick Start Ask the agent to review your current working changes for React state ownership and data-flow issues, reporting findings with file locations without editing code.

Frequently Asked Questions about react-state-data-flow-review

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

FAQPage Schema
How do I review React state management code for bugs?

Review React state by checking source-of-truth ownership, derived state that should be computed during render, async state modeling, and cache synchronization. This Skill inspects a named diff or files and reports findings with severity, evidence, and minimal fixes.

How to find duplicated state between React Query and useState?

Search for server or cache data copied into local state without a draft, optimistic, or offline reason. The review flags components that mirror query result fields into useState and recommends using the query library's source-of-truth state and selectors instead.

Does this review work with React Server Components and Next.js?

Yes, the review covers frameworks with server data loading, React Server Components, server actions, and route loaders. It checks for client-side fetching when server data exists, hydration-sensitive state, and URL params treated as local state.

When should I use useReducer instead of multiple useState calls?

Use useReducer when several fields must change together in one domain transition, such as multi-step forms or event-driven state machines. The review flags scattered setters and vague actions like a generic set payload, recommending domain-named actions instead.

What are the limitations of this React state review?

The review only covers the scoped files or diff, not the whole application, and it does not address hook lifecycle, dependency, or cleanup bugs. Missing context is reported as a limitation rather than a finding, and no issues means no issues in scope only.