Veles.createState

createState is the main reactive primitive in Veles to store state and update UI dynamically based on the changed value. It lets you to interact with it both imperatively (for example, reading and setting values in a DOM event handler) and declaratively, e.g. by combining multiple states together and deriving a new state from it, which can be composed again.

Reference

  • createState(initialValue, subscribeCallback?)

Example 

import { createState } from "veles";

function Counter() {
  const counter$ = createState(0);

  return (
    <div>
      <button
        onClick={() =>
          counter$.update((currentValue) => currentValue + 1)
        }
      >
        +
      </button>
      <p>{counter$.render((value) => `counter value is ${value}`)}</p>
    </div>
  );
}

Sections

Parameters

  • initialValue: the initial state value
  • optional subscribeCallback: receives state.set and can return a cleanup function. If the state is created inside a component, that cleanup function will run on unmount. Used to set up internal updates and usually not required directly.

More on subscribeCallback

You can connect external sources to a state by passing a second argument to createState. This is mostly useful to create self-contained listeners, as they will be automatically cleaned up when the component unmounts.

const width$ = createState(window.innerWidth, (set) => {
  const listener = () => set(window.innerWidth);
  window.addEventListener("resize", listener);

  return () => {
    window.removeEventListener("resize", listener);
  };
});

createState.empty

createState.empty is a public empty marker value. It can be used to create states that do not have a real value yet.

const result$ = createState(createState.empty);

state.dispose

  • state.dispose()

Disposes the current state and disconnects it from parent/child derived states. As long as you create state inside components, you never need to dispose state manually. This is helpful if you manage it fully outside of the Veles framework.

Example 

function FullName() {
  const name$ = createState("Seva");
  const lastName$ = createState("Zaikov");
  const fullName$ = name$
    .combine(lastName$)
    .map(([name, lastName]) => `${name} ${lastName}`);

  return fullName$.render((value) => <p>{value}</p>);
}

Table of contents