skills.rest
nbbaier
nbbaierCOMMUNITY
Explore all skills by this author →
Website𝕏@nbbaierGitHub

react-effect-patterns

Review React useEffect usage and refactor anti-patterns in components.

12|Updated Dec 23, 2025
Search Tags:#anti-patterns#react#patterns#code-review#useeffect#component-lifecycle#frontend-best-practices
One-click install
npx skills add https://github.com/nbbaier/agent-skills --skill react-effect-patterns
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-effect-patterns
Source: https://github.com/nbbaier/agent-skills/tree/main/skills/react-effect-patterns
Command: npx skills add https://github.com/nbbaier/agent-skills --skill react-effect-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Misuses and unclear patterns of React useEffect lead to hard-to-maintain code, unnecessary renders, and subtle bugs. This Skill provides a structured approach to evaluating when to use effects and how to avoid common anti-patterns.

Core Features & Use Cases

  • Provides a decision tree and best-practice guidance for useEffect, derived state, and event handling.
  • Documents common anti-patterns with concrete replacements to reduce unnecessary effects and improve readability.
  • Useful during writing, reviewing, or refactoring React components that rely on effects, data fetching, or synchronization with external systems.

Quick Start

Refactor a component by applying the guidelines to minimize unnecessary effects and improve clarity.

Frequently Asked Questions about react-effect-patterns

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

FAQPage Schema
What are common React useEffect anti-patterns and how do I fix them?▼

Common React useEffect anti-patterns include unnecessary state synchronization and redundant data fetching. This Skill identifies these misuses and provides concrete replacements and a decision tree to refactor components for safe, efficient side-effect handling.

How do I refactor React components to avoid unnecessary useEffect calls?▼

Refactor React components by applying structured guidelines that minimize unnecessary effects. This Skill offers a decision tree and best-practice replacements for anti-patterns, improving readability and reducing unnecessary renders during component refactoring.

When should I use useEffect for data fetching versus event handling in React?▼

Use useEffect for data fetching and lifecycle management by following a structured decision tree. This Skill clarifies when to apply effects versus handling events directly, preventing subtle bugs and hard-to-maintain code in React components.

Can I use this approach to review React component lifecycle management and derived state?▼

Yes, you can review React component lifecycle management and derived state using these guidelines. The Skill provides best-practice guidance for evaluating effects, making it useful during code reviews to ensure clear and performant side-effect synchronization.

Why does my React component have subtle bugs and unnecessary renders from useEffect?▼

Subtle bugs and unnecessary renders often stem from misusing useEffect for state synchronization. This Skill addresses these unclear patterns by providing concrete recommendations and anti-pattern examples to improve component performance and readability.

Related Skills

Explore More Software Engineering Skills→
salavendersalavender
47

react-hooks

Detect React hook violations and guide correct useEffect, useMemo, and useCallback patterns.

Community
Intermediate
ThomashighbaughThomashighbaugh
1

react-useeffect-avoid

Identify React useEffect anti-patterns and recommend safer alternatives.

Community
Intermediate
discountrydiscountry
1

react-principles

Enforces React core best practices for component design, state management, and useEffect.

Community
Advanced
burnjohnburnjohn
23

react-best-practices

Apply React best practices and anti-patterns to components, hooks, and state management.

Community
Advanced