preact · Preact Docs
Preact Signals
Teaches how to use reactive primitives to manage application state through automatic dependency tracking, including local state, computed signals, global state, and rendering optimizations.
Derived skill
Files assembled from official documentation
Viewing SKILL.md
Preact Signals
Teaches how to use reactive primitives to manage application state through automatic dependency tracking, including local state, computed signals, global state, and rendering optimizations.
When To Use
Use when you need to implement reactive state management that automatically updates the UI and optimizes component re-renders through dependency tracking.
Reference Files
| File | Contains | Use For |
|---|---|---|
SKILL.md | Entry point: scope, routing table, and workflow. | Start here. |
docs/preact-signals-workflow-guide.md | A comprehensive guide covering the introduction, essentials, debugging, testing, and advanced usage of Preact Signals. | Questions about a comprehensive guide covering the introduction, essentials, debugging, testing, and advanced usage of Preact Signals. |
examples/preact-signals-basic-usage-javascript.text | A text-based demonstration of creating, reading, and updating signal values using the @preact/signals library. | Exact payloads, commands, or snippets shown in A text-based demonstration of creating, reading, and updating signal values using the @preact/signals library. |
examples/preact-signals-basic-counter.text | A basic implementation of a counter component using the preact-signals library to demonstrate reactive state updates. | Exact payloads, commands, or snippets shown in A basic implementation of a counter component using the preact-signals library to demonstrate reactive state updates. |
examples/preact-signals-basic-counter-2.text | A basic implementation of a counter component using the preact-signals library to manage state. | Exact payloads, commands, or snippets shown in A basic implementation of a counter component using the preact-signals library to manage state. |
examples/preact-signals-installation-command.text | The npm install command required to add the @preact/signals package to a project. | Exact payloads, commands, or snippets shown in The npm install command required to add the @preact/signals package to a project. |
examples/preact-signals-basic-usage.text | A basic code example demonstrating how to import and initialize a signal with an array of objects in Preact. | Exact payloads, commands, or snippets shown in A basic code example demonstrating how to import and initialize a signal with an array of objects in Preact. |
examples/preact-signals-todo-list.text | A text-based code example demonstrating how to use Preact Signals to manage state for a todo list application. | Exact payloads, commands, or snippets shown in A text-based code example demonstrating how to use Preact Signals to manage state for a todo list application. |
examples/preact-signals-basic-usage-2.text | A text-based demonstration of initializing and updating a signal value using the preact-signals API. | Exact payloads, commands, or snippets shown in A text-based demonstration of initializing and updating a signal value using the preact-signals API. |
examples/preact-signals-todo-list-logic.text | A JavaScript code demonstration showing how to manage a todo list state using Preact signals. | Exact payloads, commands, or snippets shown in A JavaScript code demonstration showing how to manage a todo list state using Preact signals. |
examples/preact-signals-todo-list-2.text | A text-based code example demonstrating how to manage a todo list state using Preact Signals. | Exact payloads, commands, or snippets shown in A text-based code example demonstrating how to manage a todo list state using Preact Signals. |
examples/preact-signals-todolist.text | A functional component example demonstrating a todo list implementation using Preact Signals for state management. | Exact payloads, commands, or snippets shown in A functional component example demonstrating a todo list implementation using Preact Signals for state management. |
examples/preact-signals-signal-computed.text | A code example demonstrating the usage of signal and computed functions from the @preact/signals library to manage reactive state. | Exact payloads, commands, or snippets shown in A code example demonstrating the usage of signal and computed functions from the @preact/signals library to manage re... |
examples/preact-signals-createappstate.text | A code example demonstrating the use of signal and computed functions to manage application state in Preact. | Exact payloads, commands, or snippets shown in A code example demonstrating the use of signal and computed functions to manage application state in Preact. |
examples/preact-signals-createappstate-javascript.text | A JavaScript code example demonstrating the initialization of application state using the createAppState pattern in Preact Signals. | Exact payloads, commands, or snippets shown in A JavaScript code example demonstrating the initialization of application state using the createAppState pattern in P... |
examples/preact-signals-context-api-usage.text | A text example demonstrating how to integrate Preact Signals with the Context API to manage and distribute application state. | Exact payloads, commands, or snippets shown in A text example demonstrating how to integrate Preact Signals with the Context API to manage and distribute applicatio... |
examples/preact-signals-usecomputed-usesignal.text | A code example demonstrating the usage of useSignal and useComputed hooks from the @preact/signals library to create a reactive counter. | Exact payloads, commands, or snippets shown in A code example demonstrating the usage of useSignal and useComputed hooks from the @preact/signals library to create... |
examples/preact-signals-use-signal-hook-implementation.text | A text representation of the useSignal hook implementation and basic signal usage within the Preact framework. | Exact payloads, commands, or snippets shown in A text representation of the useSignal hook implementation and basic signal usage within the Preact framework. |
examples/preact-signals-basic-usage-javascript-2.text | A text-based demonstration of creating and accessing signal and computed values in Preact. | Exact payloads, commands, or snippets shown in A text-based demonstration of creating and accessing signal and computed values in Preact. |
examples/preact-signals-signal-computed-effect-usage.text | A code demonstration showing how to create, derive, and react to state changes using signal, computed, and effect from the @preact/signals library. | Exact payloads, commands, or snippets shown in A code demonstration showing how to create, derive, and react to state changes using signal, computed, and effect fro... |
examples/preact-signals-effect-usage.text | A text example demonstrating the use of the effect function to synchronize side effects with signal value changes. | Exact payloads, commands, or snippets shown in A text example demonstrating the use of the effect function to synchronize side effects with signal value changes. |
examples/preact-signals-basic-usage-3.text | A code demonstration showing how to initialize signals, create computed values, and manage effects using the @preact/signals library. | Exact payloads, commands, or snippets shown in A code demonstration showing how to initialize signals, create computed values, and manage effects using the @preact/... |
examples/preact-signals-effect-peek-usage.text | A code example demonstrating how to use the peek method within an effect to update a signal without creating a subscription. | Exact payloads, commands, or snippets shown in A code example demonstrating how to use the peek method within an effect to update a signal without creating a subscr... |
examples/preact-signals-untracked-usage.text | A code example demonstrating how to use the untracked function to update a signal without creating a subscription dependency. | Exact payloads, commands, or snippets shown in A code example demonstrating how to use the untracked function to update a signal without creating a subscription dep... |
examples/preact-signals-basic-usage-4.text | A code example demonstrating how to initialize signals, update their values, and manage state within a Preact component. | Exact payloads, commands, or snippets shown in A code example demonstrating how to initialize signals, update their values, and manage state within a Preact component. |
examples/preact-signals-batch-todo-list.text | A code example demonstrating how to use the batch function to perform multiple signal updates atomically within a todo list application. | Exact payloads, commands, or snippets shown in A code example demonstrating how to use the batch function to perform multiple signal updates atomically within a tod... |
examples/preact-signals-basic-usage-api.text | A code example demonstrating the core API usage of signal, computed, effect, and batch from the @preact/signals package. | Exact payloads, commands, or snippets shown in A code example demonstrating the core API usage of signal, computed, effect, and batch from the @preact/signals package. |
examples/preact-signals-component-re-render-optimization.text | A text comparison demonstrating the difference between unoptimized component re-renders and optimized signal-based text updates in Preact. | Exact payloads, commands, or snippets shown in A text comparison demonstrating the difference between unoptimized component re-renders and optimized signal-based te... |
examples/preact-signals-createmodel-nodejs.text | A JavaScript code example demonstrating how to use the createModel function from @preact/signals to manage stateful models. | Exact payloads, commands, or snippets shown in A JavaScript code example demonstrating how to use the createModel function from @preact/signals to manage stateful m... |
examples/preact-signals-createmodel-todo-list.text | A code example demonstrating how to use the createModel function with Preact Signals to manage a todo list state. | Exact payloads, commands, or snippets shown in A code example demonstrating how to use the createModel function with Preact Signals to manage a todo list state. |
examples/preact-signals-createmodel-counter.text | A code example demonstrating how to use createModel with signals to manage a counter state with computed values and methods. | Exact payloads, commands, or snippets shown in A code example demonstrating how to use createModel with signals to manage a counter state with computed values and m... |
examples/preact-signals-websocket-model.text | A code example demonstrating how to use Preact Signals to manage state within a WebSocket model using createModel and effect. | Exact payloads, commands, or snippets shown in A code example demonstrating how to use Preact Signals to manage state within a WebSocket model using createModel and... |
examples/preact-signals-basic-usage-5.text | A basic code example demonstrating the initialization and usage of a signal in Preact. | Exact payloads, commands, or snippets shown in A basic code example demonstrating the initialization and usage of a signal in Preact. |
examples/preact-signals-use-signal-component.text | A code example demonstrating the use of the useSignal hook within a Preact component to manage reactive state. | Exact payloads, commands, or snippets shown in A code example demonstrating the use of the useSignal hook within a Preact component to manage reactive state. |
examples/preact-signals-basic-usage-6.text | A text-based demonstration of creating and using signal and computed values in Preact. | Exact payloads, commands, or snippets shown in A text-based demonstration of creating and using signal and computed values in Preact. |
examples/preact-signals-use-signal-use-computed.text | A code example demonstrating the usage of useSignal and useComputed hooks within a Preact component. | Exact payloads, commands, or snippets shown in A code example demonstrating the usage of useSignal and useComputed hooks within a Preact component. |
examples/preact-signals-basic-usage-7.text | A code example demonstrating the basic usage of signals and effects in Preact. | Exact payloads, commands, or snippets shown in A code example demonstrating the basic usage of signals and effects in Preact. |
examples/preact-signals-use-signal-use-signal-effect.text | A code example demonstrating the usage of useSignal and useSignalEffect hooks within a Preact component. | Exact payloads, commands, or snippets shown in A code example demonstrating the usage of useSignal and useSignalEffect hooks within a Preact component. |
examples/preact-signals-batch-update.text | A code example demonstrating how to use the batch function to group multiple signal updates into a single reactive update in Preact. | Exact payloads, commands, or snippets shown in A code example demonstrating how to use the batch function to group multiple signal updates into a single reactive up... |
examples/preact-signals-basic-usage-8.text | A code example demonstrating the initialization of signals and the use of the effect and untracked functions in Preact Signals. | Exact payloads, commands, or snippets shown in A code example demonstrating the initialization of signals and the use of the effect and untracked functions in Preac... |
examples/preact-signals-createmodel-javascript.text | A JavaScript code example demonstrating the use of signal, computed, effect, and createModel from the @preact/signals library. | Exact payloads, commands, or snippets shown in A JavaScript code example demonstrating the use of signal, computed, effect, and createModel from the @preact/signals... |
examples/preact-signals-basic-usage-9.text | A code example demonstrating the basic usage of signal and action from the @preact/signals library. | Exact payloads, commands, or snippets shown in A code example demonstrating the basic usage of signal and action from the @preact/signals library. |
examples/preact-signals-createmodel-counter-2.text | A code example demonstrating how to use createModel and useModel with Preact Signals to manage state in a counter component. | Exact payloads, commands, or snippets shown in A code example demonstrating how to use createModel and useModel with Preact Signals to manage state in a counter com... |
examples/preact-signals-createmodel-usemodel.text | A code example demonstrating the use of createModel and useModel to manage state with Preact Signals. | Exact payloads, commands, or snippets shown in A code example demonstrating the use of createModel and useModel to manage state with Preact Signals. |
examples/preact-signals-basic-usage-10.text | A code example demonstrating how to initialize a signal and access its value within a Preact component. | Exact payloads, commands, or snippets shown in A code example demonstrating how to initialize a signal and access its value within a Preact component. |
examples/preact-signals-basic-usage-11.text | A code example demonstrating how to initialize and iterate over a signal containing an array of items within a Preact component. | Exact payloads, commands, or snippets shown in A code example demonstrating how to initialize and iterate over a signal containing an array of items within a Preact... |
examples/preact-signals-uselivesignal.text | A code example demonstrating how to use the useLiveSignal hook to synchronize an external signal with a local component state. | Exact payloads, commands, or snippets shown in A code example demonstrating how to use the useLiveSignal hook to synchronize an external signal with a local compone... |
examples/preact-signals-usesignalref-usesignaleffect.text | A code example demonstrating the usage of useSignalRef and useSignalEffect within a Preact component. | Exact payloads, commands, or snippets shown in A code example demonstrating the usage of useSignalRef and useSignalEffect within a Preact component. |
What This Skill Covers
- Guide Version: 11.x (preview) 10.x (current) 8.x
- Main sections:
Introduction,Essentials,Debug & Test,Advanced,Libraries.
Workflow
- Open the most relevant file under
docs/for the exact documented workflow and wording. - Open
schemas/files for exact structured contracts. - Open
examples/files for concrete requests, commands, snippets, and manifests. - Do not add behavior or configuration that is not present in the attached source files.
Canonical source: https://preactjs.com/guide/v10/signals