createRenderEffect

import { createRenderEffect } from "solid-js"

function createRenderEffect<T>(
  compute: () => T,
  apply?: (value: T) => (() => void) | void
): void

A render effect is a computation similar to a regular effect (as created by createEffect), but differs in when Solid schedules the first execution of the effect function. While createEffect waits for the current rendering phase to be complete, createRenderEffect immediately calls the function. Thus the effect runs as DOM elements are being created and updated, but possibly before specific elements of interest have been created, and probably before those elements have been connected to the document. In particular, refs will not be set before the initial effect call. Indeed, Solid uses createRenderEffect to implement the rendering phase itself, including setting of refs.

Split model

Like createEffect, the compute function runs in a tracking scope and returns a value. The apply function receives that value and performs the side effect. The apply function can optionally return a cleanup function.

// assume this code is in a component function, so is part of a rendering phase
const [count, setCount] = createSignal(0)

// compute tracks `count`, apply logs the value
createRenderEffect(
  () => count(),                          // compute: runs immediately
  (value) => console.log("count =", value) // apply: side effect
)
// render effect runs immediately, printing `count = 0`

Migration from Solid 1.x

// 1.x — single-callback form
createRenderEffect(() => console.log("count =", count()))

// 2.0 — split compute/apply
createRenderEffect(
  () => count(),
  (value) => console.log("count =", value)
)

Reactive updates to render effects are identical to effects: they queue up in response to a reactive change (e.g., a single signal update or collective changes during an entire render phase) and run together afterward. In Solid 2.0, all updates are batched by default via microtask scheduling.

Cleanup

The apply function can return a cleanup function. This cleanup runs before the next execution or when the effect is disposed:

createRenderEffect(
  () => eventName(),
  (event) => {
    const callback = (e) => console.log(e)
    ref.addEventListener(event, callback)
    return () => ref.removeEventListener(event, callback)
  }
)

Arguments