react-useeffect

Overview

The React useEffect skill teaches best practices from the official React documentation about when to use and when not to use useEffect. It provides a decision tree and quick reference table for identifying situations where useEffect is an escape hatch versus better alternatives like useMemo, key props, event handlers, or calculating during render.

Key Features

• Decision Tree - Clear flowchart for determining whether to use an event handler, Effect, render-time calculation, or key prop based on the specific scenario
• Anti-Pattern Catalog - Documents common mistakes like using useState + useEffect for derived state, chaining state updates, and notifying parents via Effects
• Better Alternatives Guide - Detailed guidance on using useMemo for expensive calculations, key props for state resets, event handlers for user interactions, and useSyncExternalStore for subscriptions
• Quick Reference Table - At-a-glance comparison of DON'T (useEffect misuse) vs DO (proper alternative) for six common situations
• External System Guidance - Clarifies when Effects ARE appropriate: synchronizing with external systems, subscriptions, analytics, and data fetching with cleanup

Who is this for?

This skill is for React developers who want to write cleaner, more performant components by avoiding unnecessary useEffect usage. It is particularly valuable for teams doing code reviews or for developers transitioning from class components to hooks who may overuse useEffect as a replacement for lifecycle methods.