# @wych/react

> A feature runtime for React. Pure reducers, Effect commands, tests that need no renderer.

These docs also ship inside the npm package, at `node_modules/@wych/react/docs`.

## Tutorial

- [Your first feature](https://wych.build/docs/tutorial/your-first-feature): Build a NoteEditor feature, mount it in React, and fold one action without React.
- [Async work](https://wych.build/docs/tutorial/async-work): Save the note through an Effect service. First by hand with a Command, then with Task.
- [Composing features](https://wych.build/docs/tutorial/composing-features): A NoteList parent that mounts NoteEditor children, hears their outputs, and takes children of its own.

## How-to

- [Debounce and take latest](https://wych.build/docs/how-to/debounce-and-take-latest): Wait for a pause in typing, then interrupt the request that is still in flight.
- [Subscribe to a stream](https://wych.build/docs/how-to/subscribe-to-a-stream): Start a long-lived source on Mounted, rebook it on PropsChanged, cancel it on Unmounted.
- [Test a feature without React](https://wych.build/docs/how-to/test-a-feature-without-react): Fold actions with reduce and run, supply a test layer, and record the devtools stream.
- [Render on the server](https://wych.build/docs/how-to/render-on-the-server): Paint the initial state with renderToString, then hydrate the same feature on the client.
- [Install devtools](https://wych.build/docs/how-to/install-devtools): Merge a devtools sink into the root layer, tune the console logger, or forward events elsewhere.
- [Use with AI agents](https://wych.build/docs/how-to/use-with-ai-agents): The docs ship inside the npm package, so a coding agent reads them off disk.
- [Use with the React ecosystem](https://wych.build/docs/how-to/use-with-the-react-ecosystem): Any hook through useUnsafeHooks, any client as a Layer, outputs on the way out — TanStack Query as the worked example.

## Reference

- [Runtime](https://wych.build/docs/reference/runtime): createRuntime, Provider, component, useRuntime, useFeature, output props and props validation.
- [Features](https://wych.build/docs/reference/features): define, the definition helpers, create, reduce, run, Snapshot, Next and Children.
- [Actions and outputs](https://wych.build/docs/reference/actions): Action, Action.output, Action.of, the two channels, reserved tags, Emit and NoOutputs.
- [Commands](https://wych.build/docs/reference/commands): Every Command constructor, the dispatcher, groups, Pipeable, and the contextual typing rule.
- [Lifecycle](https://wych.build/docs/reference/lifecycle): Mounted, PropsChanged, HookChanged, Error and Unmounted: payloads, order and change detection.
- [Tasks](https://wych.build/docs/reference/tasks): Task, TaskOperation, TaskValue, and the constructors, matcher and guards around them.
- [Devtools](https://wych.build/docs/reference/devtools): The Devtools service, sinks, the event union, the console logger and the recorder.

## Explanation

- [The model](https://wych.build/docs/explanation/the-model): What a useEffect graph is hiding, and the shape that replaces it.
- [Actions and outputs](https://wych.build/docs/explanation/actions-and-outputs): Why a feature has two message channels, and why the outbound one never reaches the reducer.
- [Commands as data](https://wych.build/docs/explanation/commands-as-data): Why a handler describes work instead of doing it, and what a description buys.
- [Groups and cancellation](https://wych.build/docs/explanation/groups-and-cancellation): How a later action reaches work an earlier one started, and why the namespace is flat.
- [Children and opaque props](https://wych.build/docs/explanation/children-and-opaque-props): Why a React node cannot be a schema value, and what Children gives up to carry one.
- [Compared with other libraries](https://wych.build/docs/explanation/comparisons): Where Wych overlaps with Redux Toolkit, XState and useReducer, and a direct map from TCA.

## Full text

- [All pages, concatenated](https://wych.build/llms-full.txt)