fp-ts-react

What it does

Implements practical patterns for using fp-ts with React, covering type-safe state with Option, form validation with Either (including collecting all errors and field-level errors), data fetching with TaskEither, a RemoteData pattern for async state, referential stability techniques, and dependency injection via Context using ReaderTaskEither. Also includes React 19 patterns (use() for promises, useActionState, and an outline for useOptimistic). The skill provides concrete code examples and hooks to apply these FP patterns in React applications.

How it works

• Uses Option to represent potentially missing values and demonstrates typical usage with useState and O.match to render UI for present vs. absent values.
• Uses Either for form validation, including examples that collect all errors with sequenceS and E.getApplicativeValidation, as well as field-level errors by building a Partial record of field errors.
• Wraps API calls in TaskEither via fetchJson and demonstrates a custom React hook useFetch that pipes the TE (TaskEither) result through TE.match to set loading, data, and error state data in a React component.
• Demonstrates a RemoteData type with four states (NotAsked, Loading, Failure, Success), plus a hook useRemoteData(fetchFn) that triggers execution and updates state, and a fold-based render approach for UI depending on the current state.
• Addresses referential stability by highlighting that O.some(1) creates new objects each render, suggesting useMemo and an optional stable-hooks package (fp-ts-react-stable-hooks) to compare values using equality rather than reference.
• Shows dependency injection with React Context by defining AppDependencies (api and analytics), creating a DepsContext, AppProvider, and useDeps hook, and then using the dependencies inside components, including a testing example with a mockDeps object.
• Includes React 19 specific patterns:
  • use() for promises to suspend data with Suspense.
  • useActionState to manage form submission state using an Either-based validation flow.
  • Outline of useOptimistic for immediate feedback (text truncated in provided snippet).
• Commands, file names, and tool names are quoted exactly as shown (e.g., "fp-ts-react-stable-hooks", "useStableO", "Option", "Either", "TaskEither").

When to use it

• 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.

What it can touch

• Code patterns shown use imports from fp-ts modules like 'fp-ts/Option', 'fp-ts/Either', 'fp-ts/TaskEither', and React hooks from 'react'. It also references optional tool 'fp-ts-react-stable-hooks' and standard React APIs such as useState, useEffect, useMemo, and context APIs. The examples include file content in TypeScript within React components and hooks usage.

Caveats

• License is MIT; risk is safe. The skill emphasizes patterns and sample code but does not guarantee runtime behavior or production readiness beyond demonstrations.