softaworks/react-useeffect

公式ドキュメントに基づくReactのuseEffectベストプラクティス。useEffectの作成やレビュー、派生値やデータ取得、状態同期のためのuseStateの使用時に利用します。Effectを使うべきでない場合と、より良い代替案を教えます。

react-useeffect とは?

このスキルは、React公式ドキュメントに基づいたuseEffectのベストプラクティスを提供します。開発者がuseEffectを記述またはレビューする際に、派生値の計算、データ取得、状態同期などのユースケースに対して適切なアプローチを選択できるようガイドします。特に、Effectを使うべきでない状況(例:イベントハンドラ内での処理や初期化のみのロジック)を明確にし、代わりにuseStateやカスタムフックなどのよりシンプルで信頼性の高い代替手段を提示します。このスキルは、Claude CodeやCursor、CodexなどのAIエージェントプラットフォームで活用でき、Reactアプリケーションのパフォーマンス最適化とバグ防止に貢献します。また、依存関係の正確な指定やクリーンアップ関数の実装など、useEffectの正しい使い方についての具体的なアドバイスも含まれています。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/softaworks/agent-toolkit/tree/main/skills/react-useeffect

Installed? Explore more 生産性&コラボレーション skills: steipete/gemini, steipete/gh-issues, steipete/skill-creator · View all 6 →

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

react-useeffect は何をしますか?

公式ドキュメントに基づくReactのuseEffectベストプラクティス。useEffectの作成やレビュー、派生値やデータ取得、状態同期のためのuseStateの使用時に利用します。Effectを使うべきでない場合と、より良い代替案を教えます。

使用するタイミング

  • Effectを使って外部システムと同期する場合(データ取得、サブスクリプション、DOM操作)
  • 派生値を計算するためにuseStateとuseEffectを組み合わせている場合
  • データ取得パターンを実装する場合
  • 状態の同期が必要な場合

Effectを使うべきでない場合

  • 単にコンポーネントのマウント時に一度だけ処理を実行したい場合(代わりにイベントハンドラで処理)
  • 既存のpropsやstateから計算できる値(代わりにuseMemoを使用)
  • ユーザーインタラクションに応答する処理(代わりにイベントハンドラを使用)
  • 複数のstate変数を一度に更新する場合(代わりに1つのstate更新で済ます)

ベストプラクティス

  1. 依存関係を正確に指定する: すべてのリアクティブな値(props、state、それらから派生した値)を依存関係配列に含める
  2. クリーンアップ関数を実装する: サブスクリプションやタイマーのクリーンアップを忘れずに行う
  3. 不要なEffectは削除する: 可能な限り、計算やロジックをレンダリング中またはイベントハンドラ内に移動する
  4. 適切なフックを使用する: データ取得にはカスタムフック、複雑なstate管理にはuseReducerを検討する

代替パターン

  • 派生値: useMemoまたはレンダリング中の直接計算
  • イベントハンドラ: ユーザーアクションに応じた更新にはEffectではなく直接関数を使用
  • カスタムフック: 再利用可能なロジックをカプセル化
  • useReducer: 複雑なstate更新ロジック

リソース

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

softaworks/agent-md-refactor

Refactor bloated AGENTS.md, CLAUDE.md, or similar agent instruction files to follow progressive disclosure principles. Splits monolithic files into organized, linked documentation.

softaworks/c4-architecture

Generate architecture documentation using C4 model Mermaid diagrams. Use when asked to create architecture diagrams, document system architecture, visualize software structure, create C4 diagrams, or generate context/container/component/deployment diagrams. Triggers include "architecture diagram", "C4 diagram", "system context", "container diagram", "component diagram", "deployment diagram", "document architecture", "visualize architecture".

softaworks/codex

Use when the user asks to run Codex CLI (codex exec, codex resume) or references OpenAI Codex for code analysis, refactoring, or automated editing. Uses GPT-5.2 by default for state-of-the-art software engineering.

softaworks/command-creator

This skill should be used when creating a Claude Code slash command. Use when users ask to "create a command", "make a slash command", "add a command", or want to document a workflow as a reusable command. Essential for creating optimized, agent-executable slash commands with proper structure and best practices.

softaworks/commit-work

Create high-quality git commits: review/stage intended changes, split into logical commits, and write clear commit messages (including Conventional Commits). Use when the user asks to commit, craft a commit message, stage changes, or split work into multiple commits.

softaworks/crafting-effective-readmes

Use when writing or improving README files. Not all READMEs are the same — provides templates and guidance matched to your audience and project type.

softaworks/daily-meeting-update

Interactive daily standup/meeting update generator. Use when user says 'daily', 'standup', 'scrum update', 'status update', 'what did I do yesterday', 'prepare for meeting', 'morning update', or 'team sync'. Pulls activity from GitHub, Jira, and Claude Code session history. Conducts 4-question interview (yesterday, today, blockers, discussion topics) and generates formatted Markdown update.

softaworks/database-schema-designer

Design robust, scalable database schemas for SQL and NoSQL databases. Provides normalization guidelines, indexing strategies, migration patterns, constraint design, and performance optimization. Ensures data integrity, query performance, and maintainable data models.

softaworks/dependency-updater

Smart dependency management for any language. Auto-detects project type, applies safe updates automatically, prompts for major versions, diagnoses and fixes dependency issues.

softaworks/difficult-workplace-conversations

Structured approach to workplace conflicts, performance discussions, and challenging feedback using preparation-delivery-followup framework. Use when preparing for tough conversations, addressing conflicts, giving critical feedback, or navigating sensitive workplace discussions.

softaworks/domain-name-brainstormer

Generates creative domain name ideas for your project and checks availability across multiple TLDs (.com, .io, .dev, .ai, etc.). Saves hours of brainstorming and manual checking.

softaworks/feedback-mastery

Navigate difficult conversations and deliver constructive feedback using structured frameworks. Covers the Preparation-Delivery-Follow-up model and Situation-Behavior-Impact (SBI) feedback technique. Use when preparing for difficult conversations, giving feedback, or managing conflicts.

softaworks/game-changing-features

Find 10x product opportunities and high-leverage improvements. Use when user wants strategic product thinking, mentions '10x', wants to find high-impact features, or says 'what would make this 10x better', 'product strategy', or 'what should we build next'.

softaworks/gemini

Use when the user asks to run Gemini CLI for code review, plan review, or big context (>200k) processing. Ideal for comprehensive analysis requiring large context windows. Uses Gemini 3 Pro by default for state-of-the-art reasoning and coding.

softaworks/gepetto

Creates detailed, sectionized implementation plans through research, stakeholder interviews, and multi-LLM review. Use when planning features that need thorough pre-implementation analysis.

softaworks/humanizer

Remove signs of AI-generated writing from text. Use when editing or reviewing text to make it sound more natural and human-written. Based on Wikipedia's comprehensive "Signs of AI writing" guide. Detects and fixes patterns including: inflated symbolism, promotional language, superficial -ing analyses, vague attributions, em dash overuse, rule of three, AI vocabulary words, negative parallelisms, and excessive conjunctive phrases. Credits: Original skill by @blader - https://github.com/blader/humanizer

softaworks/lesson-learned

Analyze recent code changes via git history and extract software engineering lessons. Use when the user asks 'what is the lesson here?', 'what can I learn from this?', 'engineering takeaway', 'what did I just learn?', 'reflect on this code', or wants to extract principles from recent work.

softaworks/marp-slide

Create professional Marp presentation slides with 7 beautiful themes (default, minimal, colorful, dark, gradient, tech, business). Use when users request slide creation, presentations, or Marp documents. Supports custom themes, image layouts, and "make it look good" requests with automatic quality improvements.

softaworks/meme-factory

Generate memes using the memegen.link API. Use when users request memes, want to add humor to content, or need visual aids for social media. Supports 100+ popular templates with custom text and styling.

softaworks/mermaid-diagrams

Comprehensive guide for creating software diagrams using Mermaid syntax. Use when users need to create, visualize, or document software through diagrams including class diagrams (domain modeling, object-oriented design), sequence diagrams (application flows, API interactions, code execution), flowcharts (processes, algorithms, user journeys), entity relationship diagrams (database schemas), C4 architecture diagrams (system context, containers, components), state diagrams, git graphs, pie charts, gantt charts, or any other diagram type. Triggers include requests to "diagram", "visualize", "model", "map out", "show the flow", or when explaining system architecture, database design, code structure, or user/application flows.

関連スキル