skills.rest
klen
klenCOMMUNITY
Explore all skills by this author →
Website𝕏@hornedsGitHub

react-useeffect-avoid

Identify React useEffect anti-patterns and suggest idiomatic alternatives.

5|Updated Oct 17, 2011
Search Tags:#performance#state management#react#javascript#useEffect#react patterns
One-click install
npx skills add https://github.com/klen/dotfiles --skill react-useeffect-avoid
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-useeffect-avoid
Source: https://github.com/klen/dotfiles/tree/main/.config/opencode/skills/react-useeffect-avoid
Command: npx skills add https://github.com/klen/dotfiles --skill react-useeffect-avoid

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill guides developers on when not to use React's useEffect hook, preventing common performance issues, bugs, and complex state management problems.

Core Features & Use Cases

  • Identify Anti-Patterns: Recognizes and explains common mistakes like using useEffect for derived state, state resets, or waterfalls.
  • Suggest Alternatives: Provides clear, idiomatic React solutions like calculating during render, using the key prop, or leveraging event handlers.
  • Use Case: A developer is unsure if they should use useEffect to update a list based on a prop change. This Skill explains why that's an anti-pattern and shows them how to achieve the same result more efficiently by filtering during render.

Quick Start

Explain why using useEffect to reset form state when a prop changes is an anti-pattern and provide the recommended alternative.

Frequently Asked Questions about react-useeffect-avoid

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

FAQPage Schema
How do I avoid React useEffect anti-patterns when updating derived state?▼

To avoid React useEffect anti-patterns for derived state, calculate values directly during the render phase instead of triggering state updates, which simplifies state management and improves performance.

What is the best way to reset React component state on prop changes without useEffect?▼

The best way to reset React component state on prop changes without useEffect is by using the `key` prop, which forces a complete component remount and cleanly resets all internal state.

Why does using useEffect for filtering lists cause performance issues in React?▼

Using useEffect for filtering lists causes performance issues in React because it creates unnecessary state update cycles instead of computing the filtered list directly during the render phase.

Can I handle user events in React without triggering a useEffect waterfall?▼

You can handle user events in React without triggering a useEffect waterfall by placing logic directly inside event handlers, which prevents cascading state updates and unnecessary re-renders.

When should I not use the useEffect hook in my React application?▼

You should not use the useEffect hook in React for calculating derived state, resetting state based on prop changes, or managing waterfalls of state updates that can be handled during render or via event handlers.

Related Skills

Explore More Software Engineering Skills→
kitaikuyo123kitaikuyo123

typescript-react-reviewer

Review TypeScript and React code for bugs, anti-patterns, and maintainability issues.

Community
Advanced
Chris-MaskeyChris-Maskey

react-useeffect-avoid

Identify improper useEffect usage in React components and recommend safer alternatives.

Community
Intermediate
PicoMLXPicoMLX

react-component-performance

Profile React components with React DevTools and apply memoization to reduce re-renders.

Official
Intermediate
sametozkalesametozkale

redux

Connect json-render's StateStore interface to Redux stores for React applications.

Community
Basic