fp-react
Practical patterns for using fp-ts with React - hooks, state, forms, data fetching. Works with React 18/19, Next.js 14/15.
Profile →npx skills add sickn33/agentic-awesome-skills --skill fp-react --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
What it does
Presents practical FP-TS patterns for React applications, focusing on using Option, Either, TaskEither, and RemoteData to manage state, forms, and data fetching. It includes React 18/19 compatibility notes and patterns for hooks, forms, data fetching, and remote data state management.
How it works
- Introduces and demonstrates concrete usage of Option for representing optional state (with examples like useState<O.Option<User>> and O.match for rendering).
- Provides form validation using Either, including collecting all errors via sequenceS and mapping errors to field-level messages; includes examples of not only global errors but field-level UX improvements.
- Implements data fetching with TaskEither through a fetchJson wrapper, a useFetch hook that pipes TE.match to handle success and error, and patterns for chaining and parallel API calls (TE.flatMap, TE.map, TE.ApplyPar, sequenceT).
- Defines the RemoteData pattern with four states (NotAsked, Loading, Failure, Success) and a hook (useRemoteData) that executes a fetch function and updates the RemoteData state, plus a fold-based rendering approach.
- Addresses referential stability by memoizing fp-ts values to prevent unnecessary re-renders and shows an option to use fp-ts-react-stable-hooks for stable equality checks.
- Covers dependency injection via ReaderTaskEither pattern: setting up a DepsContext, AppProvider, and useDeps to inject api and analytics services, including testing with mock dependencies.
- Includes React 19 patterns: use() for suspending data, useActionState for form submission flows, useOptimistic for instant UI feedback, and related helpers.
When to use it
- When your React app benefits from typed functional patterns for state and async flows (Option for optional data, Either for validation, TaskEither for async operations).
- When building forms with robust error handling and desire to collect all errors rather than failing fast.
- When performing data fetching with strong error handling and state representation (RemoteData recommended over basic loading/error booleans).
- When you want testable components with injected dependencies and easy mocking in tests.
What it can touch
- Code examples show usage with: React hooks, fp-ts modules (Option, Either, TaskEither, RemoteData), and functional utilities like pipe and sequenceT.
- Tooling names referenced: React hooks, Suspense (use with React 19), and the commands for installing stability helpers (e.g., npm install fp-ts-react-stable-hooks).
Caveats
- Declared risk: critical. The skill aims to equip developers with FP-TS integration patterns in React; readers should assess compatibility with their codebase and team familiarity with FP-TS concepts.
- The material emphasizes patterns and sample code; real-world integration may require adapting types and data models to project specifics.
# Functional Programming in React Practical patterns for React apps. No jargon, just code that works. --- ## 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 ```typescript import { useState } from 'react' import * as O from 'fp-ts/Option' import { pipe } from 'fp-ts/function' interface User { id: string name: string email: string } function UserProfile() { // Option says "this might not exist yet" const [user, setUser] = useState<O.Option<User>>(O.none) const handleLogin = (userData: User) => { setUser(O.some(userData)) } const handleLogout = () => { setUser(O.none) } return pipe( user, O.match( // When there's no user () => <button onClick={() => handleLogin({ id: '1', name: 'Alice', email: 'alice@example.com' })}> Log In </button>, // When there's a user (
- Quick Reference
- 1. State with Option (Maybe It's There, Maybe Not)
- Basic Pattern
- Chaining Optional Values
- 2. Form Validation with Either
- Simple Form Validation
- Collecting All Errors (Not Just First One)
- Field-Level Errors (Better UX)
- 3. Data Fetching with TaskEither
- Basic Fetch Hook
- Chaining API Calls
- Parallel API Calls
- 4. RemoteData Pattern (The Right Way to Handle Async State)
- The Pattern
npm install fp-ts-react-stable-hooks
What does the fp-react skill do?
Practical patterns for using fp-ts with React - hooks, state, forms, data fetching. Works with React 18/19, Next.js 14/15.
How do I install it?
Run `npx skills add sickn33/agentic-awesome-skills --skill fp-react --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From sickn33/agentic-awesome-skills, a repository with 44,414 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.