Reactivity

Element's reactivity system is based on signals, computed values, and effects. This creates a fine-grained reactive system that updates only what's necessary.

Signals

Signals are the basic building blocks of reactivity. They store values and notify dependents when changed.

const [count, setCount] = createSignal(0);
const [name, setName] = createSignal("John Doe");
const [fruits, setFruits] = createSignal(["Apple", "Banana", "Cherry"]);

Signal Usage

// Reading a signal
console.log(count()); // 0

// Setting a signal
setCount(42);
console.log(count()); // 42

// Signals use `Object.is()` for change detection
setCount(42); // Same value === No update

Computed Values

Computed values derive from other signals and automatically update when dependencies change.

const [firstName, setFirstName] = createSignal("John");
const [lastName, setLastName] = createSignal("Doe");

const fullName = createComputed(() => {
  return `${firstName()} ${lastName()}`;
});

console.log(fullName()); // "John Doe"
setFirstName("Jane");
console.log(fullName()); // "Jane Doe"

Effects

Effects run side effects and can clean up after themselves.

const [count, setCount] = createSignal(0);

createEffect(() => {
  const value = count();
  console.log("Count is:", value);

  // Optional cleanup function
  return () => {
    console.log("Count was:", value);
  };
});