# Fp React

> Practical patterns for using fp-ts with React - hooks, state, forms, data fetching. Works with React 18/19, Next.js 14/15.

- Skill: `newmindsgroup/fp-react` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add newmindsgroup/fp-react`
- Raw SKILL.md: https://api.skillmd.com/api/skills/newmindsgroup/fp-react/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: MIT
- Author: newmindsgroup (https://skillmd.com/u/newmindsgroup)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/newmindsgroup/fp-react

---


# Functional Programming in React

Practical patterns for React apps. No jargon, just code that works.

## When to Use
- The request matches the skill description: Practical patterns for using fp-ts with React - hooks, state, forms, data fetching. Works with React 18/19, Next.js 14/15.
- The task needs the implementation patterns, examples, validation checks, or edge cases listed in the topic map.
- The work would benefit from the complete guidance preserved in `references/full-guidance.md`.

## Core Workflow
1. Confirm the request matches this skill's trigger, scope, and risk profile.
2. Use the topic map to identify the relevant pattern, checklist, or example before writing detailed guidance or code.
3. Load `references/full-guidance.md` when implementation details, examples, anti-patterns, validation checks, or edge cases are needed.
4. Apply only the relevant guidance instead of loading or repeating the entire reference by default.
5. Verify the result against any validation checks, limitations, security notes, or platform constraints in the reference.

## Topic Map
- Quick Reference
- State with Option (Maybe It's There, Maybe Not)
- Basic Pattern
- Chaining Optional Values
- Form Validation with Either
- Simple Form Validation
- Collecting All Errors (Not Just First One)
- Field-Level Errors (Better UX)
- Data Fetching with TaskEither
- Basic Fetch Hook
- Chaining API Calls
- Parallel API Calls
- RemoteData Pattern (The Right Way to Handle Async State)
- The Pattern
- Hook with RemoteData
- Why RemoteData Beats Booleans
- Referential Stability (Preventing Re-renders)
- The Problem

## Reference Map
- `references/full-guidance.md` preserves the complete original guidance, including examples and detailed edge cases.

## Limitations
- Use this skill only when the task clearly matches the scope described above.
- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.

## Progressive Loading
Keep this `SKILL.md` as the compact routing and workflow entrypoint. Load the reference file only when the user task requires the deeper implementation material.