functional-react-nextjslisted

# Functional React and Next.js ## 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. Next.js adds a second boundary, between server and client, which maps onto the pure core and shell split almost exactly. ## When to use - Designing a component, a hook, or a page - Deciding whether a value belongs in state - Placing logic across server and client components - Writing a Server Action or a form - Reviewing React code against the design rules Not for: visual design, or framework configuration. ## Core rules 1. **Render is a pure function.** Same props and state, same output. No fetching, no writing, no mutation during render. 2. **Do not store what you can derive.** Duplicated state is duplicated knowledge, and it goes stale. 3. **`useEffect` is for synchronising with something outside React**, not for reacting to your own state. Most effects in a codebase should not exist. 4. **Model interface state as a choice type**, not as several booleans. `isLoading`, `error`, and `data` together permit states no screen has. 5. **Keep the decision pure and let the framework act.** A reducer, or a plain