createRenderEffect

createRenderEffect provides a way to handle effects that need to run during rendering.

Usage

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

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

  createRenderEffect(count, (c) => {
    document.title = `Count: ${c}`;
  });

  return <button onClick={() => setCount(c => c + 1)}>{count()}</button>;
}

Similar to createEffect, createRenderEffect accepts two arguments:

1. A reactive function to track dependencies of the side effect and return a value.
2. A side effect function that will be called with the value returned from the reactive function.

There are some key differences between createRenderEffect and createEffect:

1. Every createRenderEffect will run before any createEffect runs.
2. If a createRenderEffect depends on an newly created async signal that is not resolved yet, it will trigger its parent <Suspense> boundary.
3. If a createRenderEffect depends on an existing async signal that is not resolved yet, it will return with the previous value, similar to latest.