createRenderEffect

Creates a reactive computation that runs during the render phase as DOM elements are created and updated but not necessarily connected.

Same compute / effect split as createEffect, but scheduled inside the render queue rather than after it. Reach for this only when authoring renderer plumbing (custom DOM bindings, JSX-generated insert() / spread() calls). App code should use createEffect.

createRenderEffect<T>(compute, effectFn, options?: EffectOptions);

Import

import { createRenderEffect } from "solid-js";

Type signature

function createRenderEffect<T>(
  compute: ComputeFunction<undefined | NoInfer<T>, T>,
  effectFn: EffectFunction<NoInfer<T>, T>,
  options?: EffectOptions
): void;

Parameters

compute

A function that receives its previous value and returns a new value used to react on a computation

effectFn

A function that receives the new value and is used to perform side effects

options

EffectOptions -- name, defer, schedule

Examples

// Custom directive: bind an element's textContent to a reactive source.
function bindText(el: HTMLElement, source: () => string) {
  createRenderEffect(
    () => source(),
    (value) => {
      el.textContent = value;
    }
  );
}