classy-solid/src/effects/createStoppableEffect.ts

Solid.js reactivity patterns for classes, and class components.

import {createEffect, createSignal} from 'solid-js'

export type Effect = {stop: () => void; resume: () => void}

/**
 * NOTE: Experimental
 *
 * Create a stoppable effect.
 *
 * ```js
 * const effect = createStoppableEffect(() => {...})
 *
 * // ...later, stop the effect from running again.
 * effect.stop()
 * ```
 *
 * Note, this is experimental because when inside of a parent reactive context
 * that is long-lived (f.e. for life time of the app), each new effect created
 * with this and subsequently stopped will stick around and not be GC'd until
 * the parent context is cleaned up (which could be never).
 *
 * Stopped effects will currently only be GC'd freely when they are created
 * outside of a reactive context.
 */
export function createStoppableEffect(fn: () => void): Effect {
	const [running, setRunning] = createSignal(true)
	createEffect(() => running() && fn())
	return {stop: () => setRunning(false), resume: () => setRunning(true)}
}