fp-ts-react

This skill provides practical patterns for building React applications using functional programming principles with fp-ts. It covers common use cases such as state management with Option, form validation with Either, asynchronous data fetching with TaskEither, and handling loading/error/success states using the RemoteData pattern. The patterns provided are designed to be easily adopted and integrated into existing React and Next.js projects.

It also addresses referential stability issues when using fp-ts values in React and offers solutions using useMemo and fp-ts-react-stable-hooks. Dependency injection using React Context and ReaderTaskEither is also showcased for testable components. Finally, it includes patterns for React 19 using use(), useActionState and useOptimistic.

This skill is ideal for developers looking to leverage the benefits of functional programming in their React applications, improve code quality, and build more robust and maintainable user interfaces.

What It Does

Provides code patterns and examples for using the fp-ts library with React to implement functional programming principles in UI development. Covers state management, form validation, data fetching, and handling asynchronous operations.

When To Use

Use when building React or Next.js applications and want to leverage functional programming techniques using the fp-ts library. Ideal for projects requiring type safety, composability, and robust error handling.

Installation

Copy SKILL.md to your skills directory