useRenderEffect

Like useEffect but belongs to the render phase: it runs synchronously when created and before user effects on every flush.

Like useEffect but belongs to the render phase: it runs synchronously when created and before user effects on every flush. Used for DOM bindings; application code rarely needs it. It is not held by a pending <Suspense> boundary, and it never runs on the server. In development, one created outside any owner warns NO_OWNER_EFFECT.

Import#

import { useRenderEffect } from "@shadow-js/core";

Signature#

function useRenderEffect<T>(
  compute: () => T,
  apply?: (value: T, previous: T | undefined) => void | Cleanup,
): void

Parameters#

Name	Description
`compute`	Tracked; its result is passed to `apply`. Without `apply`, it is the effect itself and may return a cleanup function.
`apply`	Untracked; receives the value and the previous value (`undefined` on the first run), and may return a cleanup function. Undefined: only `compute` runs.

Examples#

import { createRoot, useRenderEffect, useSignal } from "@shadow-js/core";

const button = document.createElement("button");
createRoot(() => {
  const [label] = useSignal("Save");
  useRenderEffect(label, (text) => {
    button.textContent = text; // runs now, and again when label changes
  });
});