Variantes de timing: render effect y computed

createEffect no es la única forma de reaccionar. Es la más común y la que deberías usar casi siempre, pero Solid ofrece dos hermanas que hacen lo mismo —trackear dependencias y re-ejecutarse— en momentos distintos del ciclo. createComputed corre lo antes posible, dentro de la fase pura; createRenderEffect corre durante el render, antes de que el DOM se monte; createEffect corre al final, cuando el DOM ya existe. Elegir bien la variante es elegir el instante exacto en que tu reacción toca el mundo.

Tres relojes para una misma reacción

Las tres funciones comparten anatomía: reciben un cuerpo, lo corren en un scope reactivo, trackean lo que leen y vuelven a correr cuando cambia. Lo único que las separa es su lugar en el reloj del ciclo de actualización.

createComputed es el más impaciente. Su primer run ocurre de inmediato, síncronamente, en el acto de crearlo, y sus reruns suceden en la fase pura, antes que cualquier render effect o effect. Nació para un caso: escribir en otros signals durante la propagación.

createRenderEffect corre durante la fase de render. Su primer run también es inmediato —no se difiere—, pero su propósito es actuar sobre el DOM justo antes de que se monte y se pinte. De hecho, así es como el propio Solid implementa por dentro sus bindings al DOM.

createEffect es el más paciente. Su primer run se difiere hasta después del render, y sus reruns corren cuando el DOM ya está construido y actualizado. Es el lugar natural para efectos secundarios que necesitan ver el DOM ya montado o hablar con el exterior.

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

createComputed(() => console.log("1 puro"));
createRenderEffect(() => console.log("2 render"));
createEffect(() => console.log("3 efecto"));
// consola: 1 puro, 2 render, 3 efecto

flowchart LR
C[createComputed puro e inmediato] --> RE[createRenderEffect durante el render]
RE --> EF[createEffect tras montar el DOM]
style C fill:#cba6f7,color:#11111b
style RE fill:#89b4fa,color:#11111b
style EF fill:#a6e3a1,color:#11111b

El orden dentro de un tick

Cuando un lote se propaga, Solid respeta siempre la misma secuencia: primero las computaciones puras —memos y computeds—, después los render effects, y al final los effects. Ese orden no es arbitrario: refleja una dependencia de madurez.

Los computeds pueden alimentar a otros nodos, así que van primero para que todo lo derivado esté listo. Los render effects preparan el DOM. Los effects, ya con el DOM montado y el grafo cerrado, son los últimos en tocar el mundo.

Cuándo usar cada una

La regla práctica es corta. Por defecto, createEffect: es el que espera a que el DOM exista y no te sorprende con timing raro. Recurre a createRenderEffect solo cuando de verdad necesitas intervenir antes de que el DOM producido por este render se muestre, para no pintar un estado intermedio que el usuario alcance a ver.

// fijar el scroll antes del pintado evita el salto visible
createRenderEffect(() => {
  if (ref) ref.scrollTop = posicionGuardada();
});

createComputed merece un aviso aparte. Si lo que quieres es derivar un valor, no lo uses: usa createMemo, que además cachea y es leíble.

// NO: computed para derivar
createComputed(() => setDoble(n() * 2));

// SI: un memo, cacheado y sin signal espejo
const doble = createMemo(() => n() * 2);

Un memo es, en esencia, un computed con salida memorizada y consumible. La única razón legítima para createComputed es escribir a un signal de forma síncrona como parte del grafo, y hasta ese caso conviene mirarlo dos veces, porque escribir a mitad de la propagación puede forzar pasadas de recomputación adicionales.