Alpine.effect()

Create a manual reactive effect outside a template.

What is Alpine.effect()?

Alpine.effect() creates a reactive side effect that automatically re‑runs whenever any of its dependencies change. It's the foundation of Alpine's reactivity system and can be used to observe reactive data from plain JavaScript.

When to Use

Use Alpine.effect() when you need to synchronise Alpine state with external libraries, or when you want to run code in response to changes outside of a component template.

Basic Example

const state = Alpine.reactive({ count: 0 })
Alpine.effect(() => {
  console.log('Count is', state.count)
})
state.count++ // logs 1

Inside a Component

Inside an x-data component, you can use x-effect as a directive, which is the template equivalent of Alpine.effect().