react
Route React UI work to ReactStore and Preact signals: signal-first reads, necessary .useValue fallbacks, tracking, lifecycle, scheduling, and migration. Use core for shared Redux/saga work.
SKILL.mdskills/react/SKILL.md
GitHubReactStore and signal selector routing
Use this root for React-specific themis work when the touched app or
code path has React evidence: React components/hooks, JSX/TSX UI, imports from
react, ReactStore from @themislib/themis/react-store, or Preact React signal
selector consumption. Generic Redux/redux-saga guidance remains in ../core/.
React Store family rule
- A React app using this skill has chosen
ReactStoreand Preact React signal direct selector calls as the preferred component/custom-hook integration path..useValue(...args)remains available only for necessary hook/plain-value fallbacks. - Keep this app path on
ReactStoreand Preact React signal integration.
React leaf routes
| Route | Use when |
|---|---|
./signals/SKILL.md |
General Preact Signals guidance for ReactStore apps: ReadonlySignal<T>, .value, computed, Babel transform/useSignals() tracking, direct JSX signal rendering, component-local signal hooks, and avoiding module-level shared signal state. |
./store/SKILL.md |
Public ReactStore import and runtime API summary; app bootstrap mechanics live in component-integration. |
./selectors/SKILL.md |
Authoring Store-bound selectors, pure composition, argument tracking/stability, and cached ReadonlySignal<R> outputs; consumer call modes live in selector-lifecycle. |
./component-integration/SKILL.md |
Wiring ReactStore into JSX/TSX React apps, bootstrap/root init and disposal ownership, app saga startup through reactStore.runSaga(sagaFn), React component reads through direct signals first, and Store-first dispatch. |
./selector-lifecycle/SKILL.md |
Choosing React selector call modes across component render/custom hooks, direct signal-aware code, handlers/callbacks/tests, sagas, selector composition, and explicit .withStore(...) binding. |
./selector-scheduling/SKILL.md |
React ReadonlySignal/.useValue(...args) scheduling guidance: same source + selector + args output reuse, Store-owned selector coalescing, throttledSelectorFrequency, package-private scheduler boundaries, and no manual debounce/audit-log misuse. |
./migration/SKILL.md |
React migration/adoption work from local React state/context/hooks/effects/external stores to ReactStore, selectors, actions, reducers, sagas, signal-first component consumption, and cleanup. |
First-time installation and family choice start at Store-family decision gate. Once React is selected, Create and configure ReactStore owns runtime bootstrap. Adoption of existing state uses the migration Adoption checkpoint, not another bootstrap procedure.
Routing rules
- Use
ReactStoreonly from@themislib/themis/react-store. - Create production app-local React selectors through the configured
ReactStoreinstance:reactStore.createSelector(...). - Signal-first consumers and necessary plain-value fallbacks follow Call-mode map; tracking and wrong-shape boundaries follow React signal consumption guardrails.
- Output reuse and avoiding extra memoization follow Selector caching.
- Store-owned cadence and temporary trace options follow Store-first scheduling rule.
- React component, selector lifecycle, selector scheduling, and migration work must route to the React leaves above as operational guidance for this app.
Use the React leaves above for operational guidance. They cover component wiring, selector call modes and scheduling, Store lifecycle, and migration in full.
Verification cues
- Examples import package APIs only from public subpaths such as
@themislib/themis/react-store,@themislib/themis/saga, and@themislib/themis/types. - React guidance states that direct selector calls returning signals are preferred
for React consumers, while
.useValue(...args)returns plainRonly as a necessary hook/plain-value fallback. - Signal examples mention
.valuetracking through the Babel transform or explicituseSignals()and do not introduce module-level shared signal state. - The app path uses
ReactStoreand Preact React signals consistently.