skills.rest
suwandre
suwandreCOMMUNITY
Explore all skills by this author →
Website𝕏@jdogelsGitHub

react-useeffect-avoid

Identify and avoid common useEffect misuses in React code.

Updated Apr 26, 2026
Search Tags:#performance#anti-patterns#react#state-management#event-handling#render#useeffect
One-click install
npx skills add https://github.com/suwandre/my-opencode-config --skill react-useeffect-avoid-suwandre
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-useeffect-avoid
Source: https://github.com/suwandre/my-opencode-config/tree/main/skills/react-useeffect-avoid
Command: npx skills add https://github.com/suwandre/my-opencode-config --skill react-useeffect-avoid-suwandre

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This guide explains when not to use useEffect in React and points to safer alternatives to prevent performance issues and synchronization bugs.

Core Features & Use Cases

  • Guides best practices: highlights common useEffect misuse and recommended patterns for render-time calculation and explicit event handling.
  • Decision guidance: provides a decision framework for when to subscribe, fetch, or reset state without useEffect.
  • Practical examples: offers concrete patterns across derived state, resets, data fetching, and subscriptions with recommended alternatives.

Quick Start

Review a React component that misuses useEffect and provide a refactored version that performs the logic during render or via explicit handlers.

Frequently Asked Questions about react-useeffect-avoid

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

FAQPage Schema
When should I not use useEffect in React components?▼

Avoid useEffect for derived state, filtering, or transforming props during render. Calculate values directly during render or via explicit event handlers to prevent synchronization bugs and performance issues.

What is the best way to handle subscriptions in React without useEffect?▼

For external subscriptions, use useSyncExternalStore instead of useEffect. This provides a stable subscription model that prevents memory leaks and ensures consistent state transitions during concurrent rendering.

How do I reset state in React when a prop changes without useEffect?▼

Reset React component state during render using the key prop or conditional state adjustments. This avoids unnecessary effect cycles and ensures explicit state transitions without relying on useEffect.

Why does using useEffect for data fetching cause performance issues?▼

Using useEffect for data fetching triggers waterfall network requests and race conditions. Handle data fetching via explicit event handlers or framework-level loaders to improve performance and maintainability.

Can I update state based on previous state inside a useEffect hook?▼

Updating state inside useEffect based on previous state creates render loops. Use the functional state update form directly within event handlers or compute the derived state during render.

Does React require useEffect for DOM interactions and timers?▼

React does not require useEffect for all DOM interactions or timers. Use explicit event handlers for user-triggered DOM changes and manage timers carefully to avoid side effects outside the render cycle.

Related Skills

Explore More Software Engineering Skills→
nguyenthienthanhnguyenthienthanh
24

react-expert

Apply React best practices to component design and state management.

Community
Advanced
pratikpakhalepratikpakhale

you-might-not-need-an-effect

Audit and refactor React components to minimize useEffect and useLayoutEffect usage.

Community
Intermediate
przbaduprzbadu
1

react-useeffect

Identify unnecessary useEffect logic in React components and recommend render-time alternatives.

Community
Intermediate
codethreadcodethread

lang-react

Move complex logic from React components into external Zustand, XState, or TanStack Query stores.

Community
Advanced