Variantes de timing: render effect y computed

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

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 visiblecreateRenderEffect(() => {  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 derivarcreateComputed(() => setDoble(n() * 2));// SI: un memo, cacheado y sin signal espejoconst 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.