how to suppress console warning message of 'computations created outside a `createRoot` or `render`

[elder crow]

you can use createRoot to capture computations and dispose them manually

// create
function createToastElement(message: string, outerClass: string, InnerIcon: Component<JSX.SvgSVGAttributes<SVGSVGElement>>) {
  return createRoot(dispose => ({
    el: (
      <div class={cls(outerClass, style.toast)}>
        <div class={style.toastIcon}>
          <InnerIcon class={style.toastIconSvg} />
        </div>
        <div class={style.toastMessage}>{message}</div>
      </div>
    ),
    dispose
  }))
}

// dispose
function zoomAwayToast(toast: { el: HTMLElement, dispose: VoidFunction }) {
  if (toast.el && !toast.el.classList.contains(style.out)) {
    toast.el.classList.add(style.out);
    toast.el.addEventListener('animationend', () => (toast.el.remove(), toast.dispose()));
  }
}

youre not avoiding solid well if you are using jsx

it is
but the reactivity comes with it
<>{}</> creates a computation

compiler doesn't know

I think you can just use createRoot without dispose like you did to just get rid of the warnings. I'm not sure if computations without sources cause memory leaks if not disposed, my guess is that they do not

dispose clears all the connections a computations might have - sources, observers, owner, etc.

possibly

[wispy kettle]

I think you can still use /*@once*/ to tell the compiler that a statement is not reactive. In the future, that's supposed to be deprecated, then you'll have to use untrack() instead (the compiler will be optimized to recognize if all signals are untracked).

Dispose merely unsubscribes all computations in the owner from the signals connected to them.