Function with component lifecycle without rendering

[asaf]

Hey,

Is it possible to create a function that can access the state (signals, stores, contexts) but without the rendering part?

One option would be to mount the action and return "null" but this API is a bit unclean when exposing to others.

Thanks.

[agammann]

Yes. Put that logic in an ordinary function and call it synchronously during component setup. It can create signals/effects, read stores, call useContext, and register onCleanup without returning any JSX. It shares the calling component's reactive owner and cleanup lifetime.

If the logic needs to live outside a component, createRoot gives it an explicit lifetime:

function createCounter(onChange) {
  const [count, setCount] = createSignal(0);
  createEffect(() => onChange(count()));
  return {
    count,
    increment: () => setCount(value => value + 1)
  };
}

const counter = createRoot(dispose => ({
  ...createCounter(console.log),
  dispose
}));

counter.increment();
// Later, when its owner is finished:
counter.dispose();

There is no DOM rendering in this example. Disposing the root stops its effects and runs its registered cleanup callbacks. A standalone root still needs explicit disposal.

Context follows the owner tree: to read a component's provider value, call your helper from within that provider's setup/tree. A root created elsewhere doesn't automatically discover that provider. See useContext and onCleanup. Checked the effect lifetime, cleanup, and provider lookup with Solid 1.9.17.