x-effect

x-effect is a useful directive for re-evaluating an expression when one of its dependencies change. It is very similar to useEffect hook in React.

<div x-data="{ label: 'Hello' }" x-effect="console.log(label)">
    <button @click="label += ' World!'">Change Message</button>
</div>

When this component is loaded, the x-effect expression will be run and "Hello" will be logged into the console.

Because Alpine knows about any property references contained within x-effect, when the button is clicked and label is changed, the effect will be re-triggered and "Hello World!" will be logged to the console.