Pumped-fn React

What problem does it solve?

This Skill addresses the complexities of state management, testability, and architectural clarity in React applications. It automates the enforcement of best practices for @pumped-fn/react, eliminating common pitfalls like useEffect dependency hell and inconsistent data flow.

Core Features & Use Cases

• Layered Architecture Guidance: Defines clear separation between Resource, Feature State, and UI Projection layers for scalable and maintainable React apps.
• Built-in Testability: Emphasizes mocking at the resource layer using preset(), enabling robust, isolated, and fast component testing without complex setup.
• Seamless Progressive Migration: Facilitates effortless evolution from local storage prototypes to remote API backends, allowing you to swap data sources with minimal code changes.
• Use Case: Ideal for teams building new React applications or refactoring existing ones, this Skill ensures a consistent, high-performance, and easily testable architecture, significantly reducing development time and long-term maintenance costs.

Quick Start

Example: Initialize your React app with ScopeProvider

// app/main.tsx import { ScopeProvider } from '@pumped-fn/react' import { appScope } from './scope' // Assume appScope is defined

appScope.run(async () => { ReactDOM.createRoot(document.getElementById('root')!).render( <ScopeProvider scope={appScope}> <App /> </ScopeProvider> ) })