Gathering detailed insights and metrics for @preact/signals
Gathering detailed insights and metrics for @preact/signals
Gathering detailed insights and metrics for @preact/signals
Gathering detailed insights and metrics for @preact/signals
npm install @preact/signals
Typescript
Module System
Node Version
NPM Version
@preact/signals@2.2.1
Updated on Jun 29, 2025
@preact/signals-react@3.2.1
Updated on Jun 29, 2025
@preact/signals-core@1.11.0
Updated on Jun 29, 2025
@preact/signals-core@1.10.0
Updated on Jun 11, 2025
@preact/signals-react-transform@0.5.2
Updated on Jun 04, 2025
@preact/signals-core@1.9.0
Updated on May 29, 2025
TypeScript (95.52%)
JavaScript (4.41%)
Dockerfile (0.05%)
Shell (0.02%)
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
MIT License
4,130 Stars
862 Commits
111 Forks
25 Watchers
35 Branches
59 Contributors
Updated on Jul 09, 2025
Latest Version
2.2.1
Package Id
@preact/signals@2.2.1
Unpacked Size
167.38 kB
Size
32.45 kB
File Count
26
NPM Version
10.8.2
Node Version
18.20.8
Published on
Jun 29, 2025
Cumulative downloads
Total Downloads
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
1
1
2
Signals is a performant state management library with two primary goals:
Read the announcement post to learn more about which problems signals solves and how it came to be.
The Preact integration can be installed via:
1npm install @preact/signals
It allows you to access signals as if they were native to Preact. Whenever you read a signal inside a component we'll automatically subscribe the component to that. When you update the signal we'll know that this component needs to be updated and will do that for you.
1// The Preact adapter re-exports the core library 2import { signal } from "@preact/signals"; 3 4const count = signal(0); 5 6function CounterValue() { 7 // Whenever the `count` signal is updated, we'll 8 // re-render this component automatically for you 9 return <p>Value: {count.value}</p>; 10}
If you need to instantiate new signals or create new side effects on signal changes inside your components, you can use the useSignal
, useComputed
and useSignalEffect
hooks.
1import { useSignal, useComputed, useSignalEffect } from "@preact/signals"; 2 3function Counter() { 4 const count = useSignal(0); 5 const double = useComputed(() => count.value * 2); 6 7 useSignalEffect(() => { 8 console.log(`Value: ${count.value}, value x 2 = ${double.value}`); 9 }); 10 11 return ( 12 <button onClick={() => count.value++}> 13 Value: {count.value}, value x 2 = {double.value} 14 </button> 15 ); 16}
The Preact adapter ships with several optimizations it can apply out of the box to skip virtual-dom rendering entirely. If you pass a signal directly into JSX, it will bind directly to the DOM Text
node that is created and update that whenever the signal changes.
1import { signal } from "@preact/signals"; 2 3const count = signal(0); 4 5// Unoptimized: Will trigger the surrounding 6// component to re-render 7function Counter() { 8 return <p>Value: {count.value}</p>; 9} 10 11// Optimized: Will update the text node directly 12function Counter() { 13 return <p>Value: {count}</p>; 14}
To opt into this optimization, simply pass the signal directly instead of accessing the .value
property.
We can also pass signals directly as an attribute to an HTML element node.
1import { signal } from "@preact/signals"; 2 3const inputValue = signal("foobar"); 4 5function Person() { 6 return <input value={inputValue} onInput={...} />; 7}
This way we'll bypass checking the virtual-dom and update the DOM property directly.
The @preact/signals/utils
package provides additional utility components and hooks to make working with signals even easier.
The Show
component provides a declarative way to conditionally render content based on a signal's value.
1import { Show } from "@preact/signals/utils"; 2import { signal } from "@preact/signals"; 3 4const isVisible = signal(false); 5 6function App() { 7 return ( 8 <Show when={isVisible} fallback={<p>Nothing to see here</p>}> 9 <p>Now you see me!</p> 10 </Show> 11 ); 12} 13 14// You can also use a function to access the value 15function App() { 16 return <Show when={isVisible}>{value => <p>The value is {value}</p>}</Show>; 17}
The For
component helps you render lists from signal arrays with automatic caching of rendered items.
1import { For } from "@preact/signals/utils"; 2import { signal } from "@preact/signals"; 3 4const items = signal(["A", "B", "C"]); 5 6function App() { 7 return ( 8 <For each={items} fallback={<p>No items</p>}> 9 {(item, index) => <div key={index}>Item: {item}</div>} 10 </For> 11 ); 12}
The useLiveSignal
hook allows you to create a local signal that stays synchronized with an external signal.
1import { useLiveSignal } from "@preact/signals/utils"; 2import { signal } from "@preact/signals"; 3 4const external = signal(0); 5 6function Component() { 7 const local = useLiveSignal(external); 8 // local will automatically update when external changes 9}
The useSignalRef
hook creates a signal that behaves like a React ref with a .current
property.
1import { useSignalRef } from "@preact/signals/utils"; 2 3function Component() { 4 const ref = useSignalRef(null); 5 return <div ref={ref}>The ref's value is {ref.current}</div>; 6}
MIT
, see the LICENSE file.
No vulnerabilities found.
No security vulnerabilities found.