skills.rest
langfuse
langfuseOFFICIAL
Explore all skills by this author →
Website𝕏@langfuseGitHub

refactor-react-effects

Refactor avoidable React useEffect usage into render derivations, event handlers, and integration hooks.

34.0k|3.7k|Updated May 18, 2023
Search Tags:#zustand#Frontend#Refactoring#react query#useeffect#reAct#Code review
One-click install
npx skills add https://github.com/langfuse/langfuse --skill refactor-react-effects
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: refactor-react-effects
Source: https://github.com/langfuse/langfuse/tree/main/.agents/skills/refactor-react-effects
Command: npx skills add https://github.com/langfuse/langfuse --skill refactor-react-effects

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

React codebases accumulate unnecessary useEffect calls that mirror query data into local state, chain state updates, and trigger actions from flags, causing bugs like overwritten drafts on refetch and duplicated subscriptions. This Skill provides a decision framework and refactoring workflow to remove avoidable effects while preserving user-visible behavior.

Core Features & Use Cases

  • Effect Inventory and Classification: Search a frontend module for every useEffect/useLayoutEffect and classify each as render derivation, query-to-state initialization, synchronization, event workflow, external integration, or test harness.
  • Decision Rules and Patterns: Apply ordered rules—derive during render, gate on required data, run actions from events, keep only real external-system integrations—with concrete code patterns from the references file.
  • Incremental Migration Workflow: Refactor one semantic seam at a time, verify with focused tests, ESLint, type checks, and browser review, then re-run the inventory to prove the module is clean.
  • Use Case: When reviewing a Langfuse frontend form that resets local state via an effect whenever an ID prop changes, use this Skill to replace it with a keyed remount or explicit reset action and confirm drafts survive background refetches.

Quick Start

Use the refactor-react-effects skill to remove avoidable useEffect calls from this frontend module while preserving behavior.

Frequently Asked Questions about refactor-react-effects

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

FAQPage Schema
How do I remove unnecessary useEffect in React?▼

First identify whether the effect synchronizes with a real external system; if not, replace it. Derive values during render, initialize state lazily from guaranteed props, move async work into event handlers or actions, and use keyed remounts for entity changes.

How to initialize React form state from React Query data?▼

Let the query-owning parent handle loading and error states, then mount the form only after data exists and pass guaranteed initial values to a lazy useState initializer. Use a key on the entity ID only when changing entities should discard the draft.

When is useEffect actually appropriate in React?▼

useEffect is appropriate only for synchronizing with systems outside React, such as subscriptions, ResizeObserver, browser event listeners, timers, or imperative third-party widgets. Keep setup and cleanup symmetrical and isolate the effect in a narrow integration hook.

Why does my React effect overwrite user input on refetch?▼

An effect that copies query data into local state runs again on every background refetch, silently discarding edits. Fix it by deriving values during render, preserving drafts explicitly, or exposing a deliberate reset action instead of implicit synchronization.

What are the limitations of this refactoring workflow?▼

The workflow targets avoidable effects and deliberately retains genuine external-system integrations. It does not add effect-specific ESLint rules or pre-commit checks, and it avoids bundling unrelated file moves or visual changes into a migration slice.

Related Skills

Explore More Software Engineering Skills→
jtvarisjtvaris

tdd-refactor-guard

Verify test coverage before AI-assisted code refactors.

Community
Advanced
joviconjovicon
13

analyze-code-quality

Audit code quality across ESLint, Prettier, tests, TypeScript, and NestJS.

Community
Advanced
genesis-agentsgenesis-agents
2

State Management Expert

Orchestrate Zustand stores across React components with middleware and persistence.

Community
Advanced
kriegcloudkriegcloud
68

effect-v4-imports

Standardize Effect v4 module imports with enforced aliases and namespace policies.

Community
Basic