writing-react-effects
Advises on when to use useEffect versus deriving state during rendering to reduce re-renders and state inconsistencies in React.
Install
mkdir -p .claude/skills/writing-react-effects && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/3363" && unzip -o skill.zip -d .claude/skills/writing-react-effects && rm skill.zipInstalls to .claude/skills/writing-react-effects
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Writes React components without unnecessary useEffect. Use when creating/reviewing React components, refactoring effects, or when code uses useEffect to transform data or handle events.Key capabilities
- →Refactors logic to use derived state instead of useEffect
- →Identifies redundant state updates during re-renders
- →Cleans up effect-based synchronization anti-patterns
- →Optimizes component render cycles
How it works
It analyzes the state dependency chain and replaces synchronous useEffect logic with direct render-time calculations.
Inputs & outputs
When to use writing-react-effects
- →Refactoring legacy React code
- →Optimizing component render cycles
- →Cleaning up state management
- →Reviewing React code for anti-patterns
About this skill
Writing React Effects Skill
Guides writing React components that avoid unnecessary useEffect calls.
Core Principle
Effects are an escape hatch for synchronizing with external systems (network, DOM, third-party widgets). If there's no external system, you don't need an Effect.
Calculate Derived State During Rendering
If a value can be computed from current props/state, do not store it in state or update it in an effect. Derive it during render to avoid extra renders and state drift. Do not set state in effects solely in response to prop changes; prefer derived values or keyed resets instead.
Incorrect (redundant state and effect):
function Form() {
const [firstName, setFirstName] = useState('First')
const [lastName, setLastName] = useState('Last')
const [fullName, setFullName] = useState('')
useEffect(() => {
setFullName(firstName + ' ' + lastName)
}, [firstName, lastName])
return <p>{fullName}</p>
}
Correct (derive during render):
function Form() {
const [firstName, setFirstName] = useState('First')
const [lastName, setLastName] = useState('Last')
const fullName = firstName + ' ' + lastName
return <p>{fullName}</p>
}
References: You Might Not Need an Effect
When not to use it
- →Interacting with genuine external browser APIs
- →Managing complex legacy lifecycle dependencies
Prerequisites
Limitations
- →Does not replace useEffect for true external side effects
- →Requires unit testing to ensure no state drift occurs after refactor
How it compares
It prioritizes 'clean' rendering flows over the 'escape-hatch' effect patterns commonly used by mistake.
Compared to similar skills
writing-react-effects side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| writing-react-effects (this skill) | 1 | 3mo | No flags | Intermediate |
| accessibility-compliance | 45 | 2mo | No flags | Intermediate |
| react-modernization | 21 | 2mo | No flags | Advanced |
| feature-flags | 6 | 6mo | Review | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by dust-tt
View all by dust-tt →You might also like
accessibility-compliance
wshobson
Implement WCAG 2.2 compliant interfaces with mobile accessibility, inclusive design patterns, and assistive technology support. Use when auditing accessibility, implementing ARIA patterns, building for screen readers, or ensuring inclusive user experiences.
react-modernization
wshobson
Upgrade React applications to latest versions, migrate from class components to hooks, and adopt concurrent features. Use when modernizing React codebases, migrating to React Hooks, or upgrading to latest React versions.
feature-flags
Use when feature flag tests fail, flags need updating, understanding @gate pragmas, debugging channel-specific test failures, or adding new flags to React.
react-useeffect
jarrodwatts
React useEffect best practices from official docs. Use when writing/reviewing useEffect, useState for derived values, data fetching, or state synchronization. Teaches when NOT to use Effect and better alternatives.
code-standards
redpanda-data
TypeScript, React, and JavaScript best practices enforced by Ultracite/Biome.
react-ui-patterns
ChrisWiles
Modern React UI patterns for loading states, error handling, and data fetching. Use when building UI components, handling async data, or managing UI states.