react-useeffect

Name: react-useeffect
Author: jarrodwatts

134installs121forks

How to install react-useeffect?

jarrodwatts/claude-code-config/react-useeffect

$npx -y skills add jarrodwatts/claude-code-config --skill react-useeffect

Installs into the current project.

Summary

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.

Files · 1

View on GitHub

SKILL.md

1	# You Might Not Need an Effect
2
3	Effects are an escape hatch from React. They let you synchronize with external systems. If there is no external system involved, you shouldn't need an Effect.
4
5	## Quick Reference
6
7	\| Situation \| DON'T \| DO \|
8	\|-----------\|-------\|-----\|
9	\| Derived state from props/state \| `useState` + `useEffect` \| Calculate during render \|
10	\| Expensive calculations \| `useEffect` to cache \| `useMemo` \|
11	\| Reset state on prop change \| `useEffect` with `setState` \| `key` prop \|
12	\| User event responses \| `useEffect` watching state \| Event handler directly \|
13	\| Notify parent of changes \| `useEffect` calling `onChange` \| Call in event handler \|
14	\| Fetch data \| `useEffect` without cleanup \| `useEffect` with cleanup OR framework \|
15
16	## When You DO Need Effects
17
18	- Synchronizing with external systems (non-React widgets, browser APIs)
19	- Subscriptions to external stores (use `useSyncExternalStore` when possible)
20	- Analytics/logging that runs because component displayed
21	- Data fetching with proper cleanup (or use framework's built-in mechanism)
22
23	## When You DON'T Need Effects
24
25	1. Transforming data for rendering - Calculate at top level, re-runs automatically
26	2. Handling user events - Use event handlers, you know exactly what happened
27	3. Deriving state - Just compute it: `const fullName = firstName + ' ' + lastName`
28	4. Chaining state updates - Calculate all next state in the event handler
29
30	## Decision Tree
31
32	```
33	Need to respond to something?
34	├── User interaction (click, submit, drag)?
35	│ └── Use EVENT HANDLER
36	├── Component appeared on screen?
37	│ └── Use EFFECT (external sync, analytics)
38	├── Props/state changed and need derived value?
39	│ └── CALCULATE DURING RENDER
40	│ └── Expensive? Use useMemo
41	└── Need to reset state when prop changes?
42	└── Use KEY PROP on component
43	```
44
45	## Detailed Guidance
46
47	- [Anti-Patterns](./anti-patterns.md) - Common mistakes with fixes
48	- [Better Alternatives](./alternatives.md) - useMemo, key prop, lifting state, useSyncExternalStore

People who liked this also viewed

6 picks

Type

react-useeffect

134installs121forks

View on GitHub

How to install react-useeffect?

jarrodwatts/claude-code-config/react-useeffect

$npx -y skills add jarrodwatts/claude-code-config --skill react-useeffect

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# You Might Not Need an Effect
2
3	Effects are an escape hatch from React. They let you synchronize with external systems. If there is no external system involved, you shouldn't need an Effect.
4
5	## Quick Reference
6
7	\| Situation \| DON'T \| DO \|
8	\|-----------\|-------\|-----\|
9	\| Derived state from props/state \| `useState` + `useEffect` \| Calculate during render \|
10	\| Expensive calculations \| `useEffect` to cache \| `useMemo` \|
11	\| Reset state on prop change \| `useEffect` with `setState` \| `key` prop \|
12	\| User event responses \| `useEffect` watching state \| Event handler directly \|
13	\| Notify parent of changes \| `useEffect` calling `onChange` \| Call in event handler \|
14	\| Fetch data \| `useEffect` without cleanup \| `useEffect` with cleanup OR framework \|
15
16	## When You DO Need Effects
17
18	- Synchronizing with external systems (non-React widgets, browser APIs)
19	- Subscriptions to external stores (use `useSyncExternalStore` when possible)
20	- Analytics/logging that runs because component displayed
21	- Data fetching with proper cleanup (or use framework's built-in mechanism)
22
23	## When You DON'T Need Effects
24
25	1. Transforming data for rendering - Calculate at top level, re-runs automatically
26	2. Handling user events - Use event handlers, you know exactly what happened
27	3. Deriving state - Just compute it: `const fullName = firstName + ' ' + lastName`
28	4. Chaining state updates - Calculate all next state in the event handler
29
30	## Decision Tree
31
32	```
33	Need to respond to something?
34	├── User interaction (click, submit, drag)?
35	│ └── Use EVENT HANDLER
36	├── Component appeared on screen?
37	│ └── Use EFFECT (external sync, analytics)
38	├── Props/state changed and need derived value?
39	│ └── CALCULATE DURING RENDER
40	│ └── Expensive? Use useMemo
41	└── Need to reset state when prop changes?
42	└── Use KEY PROP on component
43	```
44
45	## Detailed Guidance
46
47	- [Anti-Patterns](./anti-patterns.md) - Common mistakes with fixes
48	- [Better Alternatives](./alternatives.md) - useMemo, key prop, lifting state, useSyncExternalStore

People who liked this also viewed

6 picks

Type