fp-react

# Functional Programming in React Practical patterns for React apps. No jargon, just code that works. --- ## Quick Reference | Pattern | Use When | |---------|----------| | `Option` | Value might be missing (user not loaded yet) | | `Either` | Operation might fail (form validation) | | `TaskEither` | Async operation might fail (API calls) | | `RemoteData` | Need to show loading/error/success states | | `pipe` | Chaining multiple transformations | --- ## 1. State with Option (Maybe It's There, Maybe Not) Use `Option` instead of `null | undefined` for clearer intent. ### Basic Pattern ```typescript import { useState } from 'react' import * as O from 'fp-ts/Option' import { pipe } from 'fp-ts/function' interface User { id: string name: string email: string } function UserProfile() { // Option says "this might not exist yet" const [user, setUser] = useState<O.Option<User>>(O.none) const handleLogin = (userData: User) => { setUser(O.some(userData)) } const handleLogout = () => { setUser(O.none) } return pipe( user, O.match( // When there's no user () => <button onClick={() => handleLogin({ id: '1', name: 'Alice', email: 'alice@example.com' })}> Log In </button>, // When there's a user (u) => ( <div> <p>Welcome, {u.name}!</p> <button onClick={handleLogout}>Log Out</button> </div> ) ) ) } ``` ### Chaining Optional Values ```typescript import * as ...