review-react-patterns

Audit React components for anti-patterns and recommend concrete refactors.

Updated Apr 3, 2026
One-click install
npx skills add https://github.com/jacocanete/cebu-airsoft-hub --skill review-react-patterns
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: review-react-patterns
Source: https://github.com/jacocanete/cebu-airsoft-hub/tree/main/.opencode/skills/review-react-patterns
Command: npx skills add https://github.com/jacocanete/cebu-airsoft-hub --skill review-react-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Identifies and remedies React anti-patterns that cause unnecessary re-renders, brittle components, and state-management pitfalls in the Cebu Airsoft Hub frontend.

Core Features & Use Cases

  • Detect illegal useEffect data fetching and promote hook-based data management with React Query.
  • Flag issues like dynamic list keys, inline object/array literals, and missing memoization to stabilize rendering.
  • Provide concrete refactor recommendations aligned with TanStack Router patterns and client-rendered architecture.

Quick Start

Initiate a pass 3 React patterns audit on the codebase to surface re-render issues and anti-patterns with concrete fixes.

Frequently Asked Questions about review-react-patterns

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

FAQPage Schema
How do I audit my React codebase for anti-patterns and unnecessary re-renders?▼

React Query replaces illegal useEffect data fetching by providing hook-based data management. Audit your components to detect useEffect data-fetching patterns and refactor them to use React Query for improved state management and reduced unnecessary re-renders.

How do I fix stale closures and derived state issues in React components?▼

Fixing stale closures and derived state issues requires scanning your client components for anti-patterns and applying recommended refactor patterns that properly manage state dependencies and effect cleanup to prevent brittle component behavior.

Does this React code review tool support projects using TanStack Router?▼

Yes, the React code review process supports projects using TanStack Router. It scans client-rendered architecture components and provides concrete refactor recommendations specifically aligned with TanStack Router patterns and React Query implementations.

What are common React anti-patterns that cause rendering performance issues?▼

Common React anti-patterns causing rendering performance issues include dynamic list keys, inline object and array literals, missing memoization, illegal useEffect data fetching, and stale closures that trigger unnecessary component re-renders across the application.

How do I refactor inline object and array literals to prevent React re-renders?▼

Refactoring inline object and array literals involves scanning your React components for these anti-patterns and applying memoization techniques or extracting constants to stabilize references, which prevents unnecessary child component re-renders during parent updates.