Apply functional programming patterns to React codebases

This skill applies fp-ts patterns specifically to React component code: Option<T> for state that might not exist yet (a user not loaded), Either<E, A> for form validation with a validation applicative to collect every field error at once rather than stopping at the first, TaskEither<E, A> wrapped in custom hooks for API calls (including parallel fetches via sequenceT(TE.ApplyPar)), and the RemoteData discriminated union (NotAsked | Loading | Failure | Success) as the correct replacement for a { data, loading, error } boolean triple that can represent impossible states like loading: true with data already present.

Use it when building React components or hooks that need to represent optional data, validate forms with field-level errors, fetch data asynchronously with proper loading/error/success states, or inject testable dependencies via context. It is React-specific application of fp-ts, not a general introduction to the library's data types.

A useRemoteData hook wraps a fetch function and exposes a four-state RemoteData<Error, T> that a fold function pattern-matches into the right UI for each case. A distinct gotcha this skill flags: fp-ts values like O.some(1) create a new object reference every render, so putting one directly in a useEffect dependency array fires the effect on every render even when the underlying value hasn't changed - fixed either by memoizing the fp-ts value construction with useMemo and depending on the raw value instead, or by installing fp-ts-react-stable-hooks for hooks that compare via fp-ts's Eq instances instead of reference equality. Dependency injection uses a React Context holding an AppDependencies object (API and analytics services) consumed via a useDeps() hook, making components testable by rendering them with mock dependencies instead of real API calls. React 19 patterns are covered directly: use() for suspending on a promise instead of useEffect+useState, useActionState for form submission combined with Either-based validation, and useOptimistic for instant UI feedback before a save completes.

type RemoteData<E, A> =
  | { _tag: 'NotAsked' }
  | { _tag: 'Loading' }
  | { _tag: 'Failure'; error: E }
  | { _tag: 'Success'; data: A }

Built on fp-ts's Option, Either, TaskEither, ReaderTaskEither, and Apply modules, plus two companion libraries named explicitly: fp-ts-react-stable-hooks for reference-equality-safe hooks, and @devexperts/remote-data-ts for a ready-made RemoteData implementation rather than hand-rolling the tagged union. It also notes io-ts and zod as schema-validation libraries that pair well with fp-ts's Either-based validation.

React developers already using or adopting fp-ts who need React-specific guidance - avoiding impossible loading/error/data state combinations, fixing effect re-run bugs caused by fp-ts's non-referential equality, structuring testable dependency injection, and wiring Either/TaskEither validation into React 19's useActionState and useOptimistic.