effect-atom-state

Implement reactive React state management with Effect Atoms and async actions.

22|1|Updated Apr 14, 2026
One-click install
npx skills add https://github.com/mpsuesser/pi-effect-harness --skill effect-atom-state
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: effect-atom-state
Source: https://github.com/mpsuesser/pi-effect-harness/tree/main/harnesses/effect/skills/effect-atom-state
Command: npx skills add https://github.com/mpsuesser/pi-effect-harness --skill effect-atom-state

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Effect Atom state management removes the friction of building reliable, type-safe, reactive UI state in React by letting you model state as stable Atom references with built-in async handling and cleanup.

Core Features & Use Cases

  • Reactive atoms by reference: create shared, stable state containers that automatically update all subscribed components when values change.
  • Derived and async atom patterns: compose derived state via computed atoms, and handle async effects safely using Atom.fn with AsyncResult waiting/success/error states.
  • React integration with scoped lifecycle cleanup: manage external resources and subscriptions with finalizers and atom scoping so state doesn’t leak.

Quick Start

Create an Atom (or Atom.fn for async operations) that represents your state or Effect-based action, then wire it into React using the appropriate hooks from @effect/atom-react.

Frequently Asked Questions about effect-atom-state

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

FAQPage Schema
How do I manage reactive state in React with built-in async handling?

Reactive state in React can be managed by modeling it as stable Atom references using Effect. This approach provides built-in async handling and automatic updates to all subscribed components when values change.

What is the best way to handle async state and waiting semantics in React?

Async state in React can be handled safely using Atom.fn with Effect.fnUntraced. This pattern produces AsyncResult states that explicitly manage waiting, success, and error semantics for your components.

How do I prevent state leaks when subscribing to external resources in React?

State leaks are prevented by managing external resources and subscriptions with scoped finalizers and atom scoping. This ensures proper cleanup within the React component lifecycle when subscriptions end.

Can I build streaming or pull-based pagination with reactive atoms in React?

Yes, reactive atoms support streaming and pull-based pagination in React. You can model these patterns by composing derived atoms and async actions that produce AsyncResult states for paginated data.

Does this reactive state approach work with computed derived selectors?

Yes, you can create computed atoms to build derived selectors. This allows you to compose derived state reactively, ensuring all subscribed React components update automatically when the underlying atom values change.