Effect

An effect is a mechanism designed to dispatch side effects (such as interface updates, API calls, or modifications to external data) whenever changes in its dependencies, like signals or computed values, are detected, let's have a look:

Dispatching a side effect

That's simple, just wrap a signal reading inside effect's callback function.

Component('app-component', () => {
  const counter = signal(0);
  
  effect(() => {
    console.log('counter new value is', counter());
  });
  
  const increment = () => {
    signal.set(counter() + 1);
  }
  
  return () => html`<button onclick="${increment}">Increment<button>`;
})

In the code snippet above, every time counter value changes, effect callback function will execute, writing the message in the browser console.

Handling async side effects

Effect also can handle async operations, this way:

const getData = async (data: number) => data;

Component('app-component', () => {
  const counter = signal(0);
  
  effect(async () => {
     const data = await getData(counter())
     console.log(data);
  });
  
  const increment = () => {
    signal.set(counter() + 1);
  }
  
  return () => html`<button onclick="${increment}">Increment<button>`;
})

Important: a signal cannot be written from within an effect if it is a dependency on that effect!

See an example:

Component('app-component', () => {
  const counter = signal(0);
  
  effect(() => {
     console.log(counter());
     
     // Throws an error as counter its an effect dependency in the previous line
     counter.set(counter() + 1)  
  });
  
  return () => html`<button>Increment<button>`;
})

This approach in VistaJS avoids infinite update cycles, however, you can still update signals within an effect as long as it is not its dependency, just like in the following example:

Component('app-component', () => {
  const counter = signal(0);
  const counterCopy = signal(0);
  
  effect(() => {
     console.log(counter());
     
     // Does not throw an error as counterCopy is not an effect dependency,
     // only counter signal is a dependency
     counterCopy.set(counter() + 1)  
  });
  
  return () => html`<button>${counterCopy()}<button>
})

You are going to see the result in the DOM:

<app-component>
    <button>1</button>
</app-component>