Agent skill · software engineering · aiskillstore
fp-ts-react
Practical patterns for using fp-ts with React - hooks, state, forms, data fetching. Use when building React apps with functional programming patterns. Works with React 18/19, Next.js 14/15.
Why this skill is useful
Provides practical patterns and examples for integrating fp-ts with React, enhancing type-safe state management and error handling that the AI wouldn't reliably generate on its own.
What it needs
About 10k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
Functional Programming in React Practical patterns for React apps. No jargon, just code that works. When to Use This Skill When building React apps with fp-ts for type-safe state management When handling loading/error/success states in data fetching When implementing form validation with error accumulation When using React 18/19 or Next.js 14/15 with functional patterns --- Quick Reference Pattern Use When --------- ---------- Option Value might be missing (user not loaded yet) Either Operation might fail (form validation) TaskEither Async operation might fail (API calls) RemoteData Need to show loading/error/success states pipe Chaining multiple transformations --- 1. State with Option (Maybe It's There, Maybe Not) Use Option instead of null undefined for clearer intent. Basic Pattern Chaining Optional Values --- 2. Form Validation with Either Either is perfect for validation: Left = errors, Right = valid data. Simple Form Validation Collecting All Errors (Not Just First One) Field-Level Errors (Better UX) --- 3. Data Fetching with TaskEither TaskEither = async operation that might fail. Perfect for API calls. Basic Fetch Hook Chaining API Calls Parallel API Calls --- 4. RemoteData Pattern (The Right Way to Handle Async State) Stop using { data, loading, error } booleans. Use a proper state machine. The Pattern Hook with RemoteData Why RemoteData Beats Booleans --- 5. Referential Stability (Preventing Re-renders) fp-ts values like O.some(1) create new objects each render. React sees them as "changed". The Problem Solution 1: useMemo Solution 2: fp-ts-react-stable-hooks --- 6. Dependency Injection with Context Use ReaderTaskEither for testable components with injected dependencies. Setup Dependencies Use in Components Testing with Mock Dependencies --- 7. React 19 Patterns use() for Promises (React 19+) useActionState for Forms (React 19+) useOptimistic for Instant Feedback (React 19+) --- 8. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/fp-ts-react