skills.rest
lambdasolver2
lambdasolver2COMMUNITY
Explore all skills by this author →
GitHub

effect-atom-state

Implement reactive state management with Effect Atom for React applications.

1|Updated Aug 24, 2026
Search Tags:#typescript#state management#react#reactive#effect#atom#asyncresult
One-click install
npx skills add https://github.com/lambdasolver2/opencode-effect-harness --skill effect-atom-state-lambdasolver2
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: effect-atom-state
Source: https://github.com/lambdasolver2/opencode-effect-harness/tree/main/packages/module-typescript/assets/skills/effect-atom-state
Command: npx skills add https://github.com/lambdasolver2/opencode-effect-harness --skill effect-atom-state-lambdasolver2

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires effect, @effect/atom-react, @effect/platform-browser.

What problem does it solve? Managing reactive state in React applications with Effect-based services often leads to manual loading flags, lost error states, and memory leaks from unmanaged subscriptions. This Skill provides patterns for building type-safe reactive state with Effect Atom that handles async lifecycles, cleanup, and error states automatically. ## Core Features & Use Cases - Async Function Atoms: Use Atom.fn with Effect.fnUntraced to get automatic AsyncResult types with waiting flags, replacing manual loading state wrappers. - Derived and Family Atoms: Create computed atoms with Atom.map and stable per-entity atoms with Atom.family for dynamic state sets. - Service Integration: Wrap Effect layers with Atom.runtime to access services inside atoms, plus persistence via Atom.kvs and pagination via Atom.pull. - Use Case: Build a user dashboard where fetching a profile, paginating notifications, and persisting theme settings all use atoms with automatic loading states, error handling via AsyncResult.matchWithWaiting, and cleanup on unmount. ## Quick Start Show me how to create an Effect Atom that fetches user data from a service with proper loading and error states in a React component.

Frequently Asked Questions about effect-atom-state

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

FAQPage Schema
How do I handle async operations with Effect Atom in React?▼

Use Atom.fn with Effect.fnUntraced to create function atoms that return AsyncResult with an automatic waiting flag. Trigger them with useAtomSet and render states with AsyncResult.matchWithWaiting or AsyncResult.builder.

How to create dynamic atoms per entity ID in Effect Atom?▼

Use Atom.family to create stable atom references keyed by an ID, such as userAtoms(userId). The family always returns the same atom for a given key, and you can pipe Atom.keepAlive to persist values across component lifecycles.

Can Effect Atom access Effect services and layers?▼

Yes, wrap your layers with Atom.runtime to create a runtime atom, then use runtime.fn to access services inside function atoms. You can also register global layers once at app startup with Atom.runtime.addGlobalLayer.

Why does my Effect Atom state reset when components unmount?▼

Atoms automatically reset when their last subscriber unsubscribes unless marked with Atom.keepAlive. Add keepAlive to atoms that must persist across component lifecycles, such as global or shared state.

What are common Effect Atom anti-patterns to avoid?▼

Avoid creating atoms inside components, wrapping Effects in manual void functions with separate loading atoms, and ignoring AsyncResult variants. Define atoms outside components, use Atom.fn for async work, and handle all result states.

Related Skills

Explore More Software Engineering Skills→
mpsuessermpsuesser
22

effect-react-composition

Compose React component APIs and wire reactive state with Effect Atom.

Community
Intermediate
inpinitiinpiniti

xstate

Bridge json-render's StateStore interface with @xstate/store atoms for React UIs.

Community
Intermediate
MinhAnh-CorpMinhAnh-Corp

react-state-management

Provide structured React state management patterns for local, global, and server state.

Official
Advanced
arcjetarcjet
1

integrate-arcjet-guard-crewai

Integrate Arcjet Guard security policies into CrewAI tool execution and inbound message screening.

Official
Advanced