Preact Signals Has a Free API That Most Developers Don't Know About

Preact Signals is a reactive state primitive that updates only the DOM nodes that depend on changed values — skipping the Virtual DOM entirely.

Basic Signals

import { signal, computed, effect } from "@preact/signals";

const count = signal(0);
const double = computed(() => count.value * 2);

effect(() => console.log(`Count: ${count.value}, Double: ${double.value}`));
count.value = 5;

In Preact Components

const count = signal(0);

function Counter() {
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => count.value++}>+1</button>
    </div>
  );
}

In React

import { useSignal } from "@preact/signals-react";

function App() {
  const count = useSignal(0);
  return <button onClick={() => count.value++}>{count}</button>;
}

Key Features

• Fine-grained reactivity — updates DOM directly
• Works with React via @preact/signals-react
• Computed values with auto dependency tracking
• Batch updates for performance

---

Need to scrape or monitor web data at scale? Check out my web scraping actors on Apify — ready-made tools that extract data from any website in minutes. Or email me at [e-mail] for custom solutions.