fp-react

Store Option values with useState and render with O.match to handle the some and none cases. Memoize Option creation with useMemo or depend on the raw value in effects, since O.some creates a new object each render.

Write validators returning Either<string, string>, then combine them with sequenceS and getApplicativeValidation to collect all errors at once. Use E.match in the submit handler to display errors or submit valid data.

RemoteData is a four-state union type: NotAsked, Loading, Failure, and Success. It replaces separate data, loading, and error booleans, making impossible states unrepresentable and forcing the UI to handle every case explicitly.

Yes, fp-ts works with React 18/19 and Next.js 14/15. The patterns integrate with React 19 features like use() for promises, useActionState for form actions, and useOptimistic for instant UI feedback.

Constructors like O.some create new object references each render, so React treats them as changed in dependency arrays. Fix this with useMemo around Option creation or use fp-ts-react-stable-hooks with fp-ts equality functions.

Use TaskEither when async operations can fail and you want typed, composable error handling. It lets you chain dependent calls with flatMap, run parallel requests with sequenceT, and match on success or failure without try/catch blocks.