fp-ts-react - Practical Functional Programming Patterns for React

Skills Overview

Use fp-ts for type-safe functional programming in React applications, covering practical patterns such as state management, form validation, and data fetching.

When to Use

1. Need type-safe state management When building apps with React 18/19 or Next.js 14/15, you need to use Option instead of null/undefined, Either to handle validation errors, and RemoteData to manage asynchronous state—avoiding runtime type errors.

2. Need to cumulatively display all form validation errors When a form must display validation errors for all fields at once (instead of stopping at the first error), use Either’s ApplicativeValidation to elegantly collect all error information.

3. Need clearer asynchronous state handling Tired of Boolean combinations of data/loading/error (which can lead to impossible states), you can use the state-machine pattern of RemoteData to ensure there are only four explicit states: NotAsked / Loading / Failure / Success.

Core Features

1. Type-safe state patterns Provides type-safe constructs such as Option (a value may be missing), Either (an operation may fail), and TaskEither (an asynchronous operation may fail), making the intent of component state clearer and avoiding runtime errors caused by null/undefined.

2. Cumulative form validation errors Using Either’s validation applicative pattern, you can collect validation errors for all fields on form submission rather than showing only the first error—greatly improving the user experience.

3. RemoteData for asynchronous state management Use a state machine instead of the traditional data/loading/error combination to ensure there are only four valid states, eliminating impossible states like “there is data but loading is true,” and making async state management more reliable.

Common Questions

What is fp-ts used for in React?

fp-ts provides type-safe patterns such as Option, Either, and TaskEither. They can replace common null/undefined checks and try-catch error handling in React—for example, using Option to represent user data that may not exist, using Either to handle form validation, and using RemoteData to manage API request state. This makes code intent clearer and runtime behavior safer.

How do you show all form validation errors in React?

Use Either’s ApplicativeValidation mode. Traditional validation returns as soon as it hits the first error, whereas fp-ts’s sequenceS can run all validations in parallel, collecting each field’s errors into an array. This lets users see everything they need to fix at once, instead of correcting one issue only to discover the next after resubmission.

What’s better about the RemoteData pattern than loading/error/data?

The traditional combination of data/loading/error as three Booleans or optional values may result in impossible states—for example, “both data and an error exist” or “loading is true but data is also present.” RemoteData is a state machine that can only be one of NotAsked, Loading, Failure, or Success. This eliminates impossible states at the type level. As a result, the UI rendering logic for async state is simpler and less prone to bugs.