fp-react_skill

Overview

This skill provides practical, no-jargon patterns for using fp-ts with React (hooks, state, forms, data fetching, and dependency injection). It targets React 18/19 and Next.js 14/15 and focuses on code that is easy to apply in real apps. Examples cover Option, Either, TaskEither, RemoteData, stability, and ReaderTaskEither wiring for testable components.

How this skill works

The content shows concrete patterns and small utilities: use Option for optional state, Either for validation, TaskEither for fallible async calls, and a RemoteData state machine for clear async UI. It demonstrates hooks and helpers (useFetch, useRemoteData, stable memoization) and how to inject dependencies via Context with ReaderTaskEither for testable components. Each pattern includes minimal code and reasons for the choice so you can copy and adapt quickly.

When to use it

• Replace null/undefined UI state with Option when a value may be absent
• Use Either to validate forms and collect field-level errors
• Wrap API calls in TaskEither to model async failures explicitly
• Adopt RemoteData when you need an unambiguous async state machine
• Use ReaderTaskEither and Context to inject services for easier testing

Best practices

• Prefer pipe to chain transformations and keep intent explicit
• Collect validation errors with applicative Either for better UX
• Memoize fp-ts values or use equality-aware hooks to prevent needless re-renders
• Model async UI as RemoteData to avoid impossible boolean combinations
• Keep side-effectful code in hooks and inject external services via context

Example use cases

• A signup form that shows field-level errors and collects all validation failures
• A reusable useFetch hook built on TaskEither with clear loading/error handling
• A dashboard that composes multiple API calls in parallel using ApplyPar
• A profile component that stores optional user state with Option and avoids re-render churn
• An app wired with AppProvider that injects API and analytics mocks for unit tests