skills.rest
aquarius-wing
aquarius-wingCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

react

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
One-click install
npx skills add https://github.com/aquarius-wing/polymarket-dev-tools --skill react-aquarius-wing
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
lava-chenlava-chen
1

react-component

Create typed, reusable React components with hooks and TypeScript patterns.

Community
Basic
GrupoUSGrupoUS
1

web-artifacts-builder

Bundle React, Tailwind, and shadcn/ui artifacts into a single HTML file.

Community
Intermediate
doanchienthangdevdoanchienthangdev
4

designing-frontend-patterns

Design scalable React component architectures with compound components, custom hooks, and state machines.

Community
Intermediate
slashwhyslashwhy
5

vue-composables

Implement Vue 3 composable patterns for reusable logic and reactive state.

Official
Intermediate