react-useeffect
React useEffect best practices guide covering when to use Effects and superior alternatives.
- Teaches the escape-hatch nature of Effects: use only for synchronizing with external systems, not for derived state, expensive calculations, or user event responses
- Provides a decision tree and quick-reference table mapping common situations (data fetching, state derivation, prop changes) to the correct React pattern
- Covers when NOT to use Effects: transforming data for render, handling user events, deriving state, and chaining state updates
- Recommends alternatives including direct calculation during render, useMemo for expensive computations, key prop for state reset, and useSyncExternalStore for subscriptions
You Might Not Need an Effect
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.
Quick Reference
| Situation | DON'T | DO |
|---|---|---|
| Derived state from props/state | useState + useEffect |
Calculate during render |
| Expensive calculations | useEffect to cache |
useMemo |
| Reset state on prop change | useEffect with setState |
key prop |
| User event responses | useEffect watching state |
Event handler directly |
| Notify parent of changes | useEffect calling onChange |
Call in event handler |
| Fetch data | useEffect without cleanup |
useEffect with cleanup OR framework |
When You DO Need Effects
- Synchronizing with external systems (non-React widgets, browser APIs)
- Subscriptions to external stores (use
useSyncExternalStorewhen possible)
More from softaworks/agent-toolkit
mermaid-diagrams
Comprehensive guide for creating software diagrams using Mermaid syntax. Use when users need to create, visualize, or document software through diagrams including class diagrams (domain modeling, object-oriented design), sequence diagrams (application flows, API interactions, code execution), flowcharts (processes, algorithms, user journeys), entity relationship diagrams (database schemas), C4 architecture diagrams (system context, containers, components), state diagrams, git graphs, pie charts, gantt charts, or any other diagram type. Triggers include requests to "diagram", "visualize", "model", "map out", "show the flow", or when explaining system architecture, database design, code structure, or user/application flows.
4.0Khumanizer
|
3.9Kwriting-clearly-and-concisely
Use when writing prose humans will read—documentation, commit messages, error messages, explanations, reports, or UI text. Applies Strunk's timeless rules for clearer, stronger, more professional writing.
3.8Kqa-test-planner
Generate comprehensive test plans, manual test cases, regression test suites, and bug reports for QA engineers. Includes Figma MCP integration for design validation.
3.7Kdatabase-schema-designer
Design robust, scalable database schemas for SQL and NoSQL databases. Provides normalization guidelines, indexing strategies, migration patterns, constraint design, and performance optimization. Ensures data integrity, query performance, and maintainable data models.
3.7Kagent-md-refactor
Refactor bloated AGENTS.md, CLAUDE.md, or similar agent instruction files to follow progressive disclosure principles. Splits monolithic files into organized, linked documentation.
3.7K