Secondary primitives

createRenderEffect

Edit this page

The createRenderEffect primitive creates a reactive computation that automatically tracks reactive values, such as signals, accessed within the provided function. This function re-runs whenever any of its dependencies change.

Execution Timing

  • The initial execution of render effects occurs during the current rendering phase. It runs synchronously while DOM elements are being created and updated, but before they are mounted.

    As a result, refs are not set before the render effect runs for the first time.

  • After the initial execution, render effects will re-run whenever any of their dependencies change.

    Render effects always re-run after any pure computations (such as memos) are executed within the same update cycle.

    When multiple dependencies are updated within the same batch, the render effect will only run once.

    The order in which render effects re-run is not guaranteed.

Import

import { createRenderEffect } from "solid-js";

Type

function createRenderEffect<Next>(
  fn: EffectFunction<undefined | NoInfer<Next>, Next>
): void;
function createRenderEffect<Next, Init = Next>(
  fn: EffectFunction<Init | Next, Next>,
  value: Init,
  options?: { name?: string }
): void;
function createRenderEffect<Next, Init>(
  fn: EffectFunction<Init | Next, Next>,
  value?: Init,
  options?: { name?: string }
): void;

Parameters

fn

  • Type: EffectFunction<undefined | NoInfer<Next> | EffectFunction<Init | Next, Next>
  • Required: Yes

The function to execute as the render effect. It receives the value returned from the previous execution, or the initial value during its the first run. The value returned by this function will be passed to the next execution.

value

  • Type: Init
  • Required: No

The initial value that is passed to fn during its first execution.

options

  • Type: { name?: string }
  • Required: No

An optional configuration object with the following properties:

name

  • Type: string
  • Required: No

A name for the render effect, which can be useful for identification in debugging tools like the Solid Debugger.

Return value

createRenderEffect does not return a value.

Examples

Basic Usage

import { createSignal, createRenderEffect } from "solid-js";


function Counter() {
  const [count, setCount] = createSignal(0);


  // This runs immediately during render, and re-runs when the count changes.
  createRenderEffect(() => {
    console.log("Count: ", count());
  });


  return (
    <div>
      <p>Count: {count()}</p>
      <button onClick={() => setCount((prev) => prev + 1)}>Increment</button>
    </div>
  );
}

Execution Timing

import { createSignal, createEffect, createRenderEffect } from "solid-js";


function Counter() {
  const [count, setCount] = createSignal(0);


  // This is part of the component's synchronous execution.
  console.log("Hello from counter");


  // This effect is scheduled to run after the initial render is complete.
  createEffect(() => {
    console.log("Effect:", count());
  });


  // By contrast, a render effect runs synchronously during the render phase.
  createRenderEffect(() => {
    console.log("Render effect:", count());
  });


  // Setting a signal during the render phase re-runs render effects, but not effects, which are
  // still scheduled.
  setCount(1);


  // A microtask is scheduled to run after the current synchronous code (the render phase) finishes.
  queueMicrotask(() => {
    // Now that rendering is complete, signal updates will trigger effects immediately.
    setCount(2);
  });
}


// Output:
// Hello from counter
// Render effect: 0
// Render effect: 1
// Effect: 1
// Render effect: 2
// Effect: 2

Related

Report an issue with this page