Skip to main content
The sync package includes a reactive state system inspired by SolidJS and Svelte. It provides Signals for state, Computed for derived values, and Effects for side effects. This enables automatic updates when data changes.

Core Concepts

Why Reactive State?

Without reactivity:
With reactivity:

Signal

A Signal is a reactive value container. When the value changes, all dependents are notified.

Creating Signals

Reading Values

When Get() is called inside a Computed or Effect, it automatically registers as a dependency.

Setting Values

Updating Values

Full Example

Computed

A Computed is a derived value that automatically recomputes when its dependencies change.

Creating Computed Values

Reading Computed Values

Lazy Evaluation

Computed values are:
  1. Lazy - Only computed when accessed
  2. Cached - Not recomputed if dependencies haven’t changed

Chained Computed

Computed values can depend on other computed values:

Effect

An Effect runs a function whenever its dependencies change. Use it for side effects like logging, API calls, or UI updates.

Creating Effects

Stopping Effects

Effect Use Cases

Logging:
UI Updates:
Persistence:

Practical Examples

Counter

Form Validation

Filtered List

Stats Dashboard

Integration with Collections

Collections are reactive:

Thread Safety

All reactive primitives are thread-safe:

Best Practices

1. Keep Computations Pure

Use Effects for side effects.

2. Avoid Deep Nesting

3. Stop Effects When Done

4. Use Computed for Derived State

5. Break Down Complex Computations