whatiskadudoing/fp-ts-skills
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
FAQ
Yes. Patterns show both hook-based fetching and examples that use Promise-based data with use() and Suspense for React 19.
Will using fp-ts cause excessive re-renders?
Not if you memoize fp-ts values or use equality-aware helpers. The skill explains useMemo and fp-ts-react-stable-hooks to avoid reference-equality issues.
13 skills
This skill helps you apply functional programming patterns in React apps using fp-ts, improving state, forms, and data fetching.
This skill helps you compose TypeScript functions into readable pipelines using pipe and flow for clear, maintainable data transformations.
This skill helps you transform arrays and objects with functional patterns, enabling safer access, grouping, and normalization for real-world data.
This skill provides quick TaskEither patterns for async error handling, API calls, and Promise-based workflows using fp-ts.
This skill helps you build robust async pipelines with TaskEither, replacing try/catch chaos and improving error handling across APIs.
This skill helps you migrate imperative TypeScript code to fp-ts patterns, enabling explicit errors, safe optional handling, and functional composition.
This skill helps you apply practical fp-ts patterns to write clearer, safer TypeScript code with minimal jargon and maximal 80/20 impact.
This skill helps you master function composition in fp-ts using pipe and flow to build elegant, type-safe data pipelines.
This skill helps you implement robust error handling with fp-ts by returning errors as values and chaining safely.
This skill helps you handle typed errors and validation with Either in TypeScript, enabling safe, composable error handling patterns.
This skill enables type-safe async error handling with TaskEither patterns in TypeScript, enabling composable, lazy operations and robust error recovery.
This skill guides practical immutability patterns in TypeScript to safely update state and reduce bugs across arrays and objects.
This skill teaches pure functions, currying, and composition to improve predictability, testability, and maintainable code in TypeScript and FP patterns.
