react

Name: react
Availability: InStock
Author: aquarius-wing

Identify and solve React pitfalls in components, hooks, and side effects.

Updated Feb 21, 2026

Search Tags:#frontend #react #hooks #component #best-practices #state-management #useeffect

Ready to run

npx skills add https://github.com/aquarius-wing/polymarket-dev-tools --skill react-aquarius-wing

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react
Source: https://github.com/aquarius-wing/polymarket-dev-tools/tree/main/.cursor/skills/react
Command: npx skills add https://github.com/aquarius-wing/polymarket-dev-tools --skill react-aquarius-wing

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps developers write safer, more maintainable React code by addressing common pitfalls in components, hooks, and side effects, and by sharing best practices.

Core Features & Use Cases

Guidance on useEffect and cleanup: explains timing pitfalls and proper cleanup strategies.
Dialog state management patterns: demonstrates Trigger + Content pattern to manage complex state and lifecycle.
Incremental side effects: advises tracking previous values with refs to trigger effects only on new elements.

Quick Start

Refactor complex dialogs to Trigger + Content and apply useEffect cleanup patterns to ensure deterministic teardown.

Frequently Asked Questions about react

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

FAQPage Schema

How do I fix useEffect timing issues and ensure proper cleanup in React components?▼

To fix useEffect timing issues, apply proper cleanup strategies to ensure deterministic teardown and prevent side effect pitfalls. This involves returning a cleanup function from useEffect to manage component lifecycle safely.

What is the Trigger + Content pattern for managing dialog state in React?▼

The Trigger + Content pattern is a React state management approach that refactors complex dialogs to separate trigger logic from content lifecycle. This structure ensures maintainable and predictable dialog behavior.

How do I trigger side effects incrementally only when new elements are added in React?▼

To trigger side effects incrementally, track previous values using refs in React. This approach ensures effects run only on new elements rather than executing repeatedly across the entire list.

What are the best practices for writing maintainable React hooks and components?▼

Best practices for React hooks involve addressing common pitfalls in side effects, applying useEffect cleanup patterns, and adopting structured state management like the Trigger + Content pattern for safer code.

When should I use refs to track previous values instead of standard useEffect dependencies?▼

You should use refs to track previous values when incremental side effects are needed across frontend projects. This avoids redundant effect executions and solves common timing pitfalls.