skills.rest
luyzkk
luyzkkCOMMUNITY
Explore all skills by this author →
GitHub

react-patterns

Diagnose React and Next.js component anti-patterns with consultor-mode recommendations.

Updated Mar 8, 2026
Search Tags:#performance#state management#react#tanstack query#memoization#stale closures#useeffect
One-click install
npx skills add https://github.com/luyzkk/Anti-Vibe-Coding --skill react-patterns-luyzkk
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-patterns
Source: https://github.com/luyzkk/Anti-Vibe-Coding/tree/main/skills/react-patterns
Command: npx skills add https://github.com/luyzkk/Anti-Vibe-Coding --skill react-patterns-luyzkk

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill helps you prevent common React/Next.js component bugs and performance regressions by steering you away from anti-patterns like misuse of useEffect, manual data fetching, stale closures, and premature memoization.

Core Features & Use Cases

  • Consultor guidance on React component patterns: Explain what’s wrong in the user’s current approach and how to structure the correct pattern without providing full replacement code.
  • Targeted fixes for high-risk topics: useEffect (especially when it should be derived state), data fetching (TanStack Query over manual fetch/axios), stale closures, and memoization/state-management decision rules.
  • Actionable verification criteria: Provide a review checklist to confirm the fix reduces re-renders, eliminates race/memory-leak risks, and aligns client/server state boundaries.

Use Case Example: When a user shares a component that fetches user data inside useEffect and manages loading/error manually, the skill guides them to switch to a declarative TanStack Query pattern and explains which bug classes are eliminated.

Quick Start

Ask the skill to review a specific React component pattern, for example: "Analyze my React component’s useEffect data fetching and suggest the correct TanStack Query approach with verification criteria."

Frequently Asked Questions about react-patterns

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

FAQPage Schema
How do I fix stale closures and misuse of useEffect in React components?▼

Fix stale closures and useEffect misuse by replacing manual fetching and derived state with declarative patterns, aligning React Hooks dependency rules to eliminate race conditions and memory leaks while reducing re-renders.

What is the best way to handle data fetching in React instead of useEffect?▼

Data fetching in React should use TanStack Query instead of manual fetch or axios inside useEffect, eliminating manual loading and error state management while preventing race conditions and stale closure bugs.

When should I use memoization in React components?▼

Memoization in React requires explicit decision criteria to prevent premature optimization, evaluating component re-render frequency and state management hierarchy to determine if memoization genuinely improves performance.

Why does my React useEffect cause unnecessary re-renders?▼

React useEffect causes unnecessary re-renders when misused for derived state that should be computed during render, requiring pattern replacement to align with React Hooks dependency rules and improve component correctness.

Can I use TanStack Query with Next.js for server and client state management?▼

TanStack Query works with Next.js by separating client and server state management boundaries, replacing manual fetch logic in useEffect with declarative data fetching patterns that eliminate bug classes like race conditions.

What are common React anti-patterns that hurt performance?▼

Common React anti-patterns hurting performance include useEffect misuse for derived state, manual data fetching, stale closures, and premature memoization, which require component-level analysis and pattern replacement to verify improvements.

Related Skills

Explore More Software Engineering Skills→
nguyenthienthanhnguyenthienthanh
24

react-expert

Apply React best practices to component design and state management.

Community
Advanced
christofferbergjchristofferbergj
5

tanstack-query-best-practices

Organize TanStack Query patterns for fetching, caching, and mutating server state in React apps.

Community
Advanced
boludo00boludo00
80

react

Manage React components, hooks, and lazy loading for single-page applications.

Community
Intermediate
chavangorakh1999chavangorakh1999
1

react-hooks

Analyze React Hooks code for dependency arrays and stale closures.

Community
Intermediate