functional-typescript-reactlisted

# Functional React ## Overview React is already a functional architecture: a component is a pure function from props and state to a description of the interface, and the framework performs the effects. The design rules in this pack apply directly, and the common React problems are the same problems they describe: state that duplicates a fact, effects tangled with decisions, and components whose interface is as complicated as their body. This pack covers React itself. The TypeScript it is written in is in [functional-typescript](../functional-typescript/SKILL.md), and the server and client split a meta-framework adds is in [functional-typescript-react-nextjs](../functional-typescript-react-nextjs/SKILL.md). **Check the installed version before writing code.** The shapes below target React 19. ## When to use - Designing a component, a hook, or a custom hook's interface - Deciding whether a value belongs in state or is derived - Modelling what a screen can be showing - Keeping a business rule out of an event handler - Reviewing React code against the design rules Not for: visual design, framework configuration, or the server and client boundary. ## Core rules 1. Rule. **Render is a pure function.** Same props and state, same output. No fetching, no writing, no mutation during render. 2. Default. **Do not store what you can derive.** Duplicated state is duplicated knowledge, and it goes stale. 3. Default. **`useEffect` is for synchronising with something outside Re