Comprehensive documentation for Burned.js' reactive programming toolkit with usage examples and code snippets.
function reactive(source)
Core function that creates a reactive signal from a source value. Automatically tracks dependencies and updates when the source changes.
// Basic usage
const count = reactive(0);
effect(() => {
console.log(`Count changed to: ${count.value}`);
});
count.value = 42;
function effect(callback)
Registers a computation that will automatically re-run when any reactive dependencies it uses change.
const data = reactive({ user: "Alice", theme: "dark" });
effect(() => {
document.title = `${data.user}'s App`;
});
function derived(reactiveSource, compute)
Derives a new signal from a source using a compute function. Only recomputes when dependencies change.
const width = reactive(100);
const height = reactive(50);
const area = derived([width, height], () => width.value * height.value);
console.log(area.value); // 5000
Commonly used functions and helpers that work seamlessly with reactive signals.
signal(value) creates a manually managed signal with .value access pattern.
watch(signal, callback) executes a callback whenever the signal's value changes.
batch(callback) groups multiple updates into a single reactive cycle to avoid unnecessary computations.
debounce(signal, delay) delays execution of reactive effects for the specified time.
function compute(signal, compute)
Advanced version of derived signals with custom cleanup and disposal patterns.
const interval = reactive(1000);
const timeout = compute(interval, (dispose) => {
const id = setInterval(() => {
console.log(`Interval: ${interval.value}`);
}, interval.value);
return () => clearInterval(id);
});
Explore working demos of Burned.js core methods in our interactive playground.