Integrar librerías imperativas

Antes o después toca casar Solid con una librería que no sabe nada de reactividad: un gráfico, un mapa, un editor de código, un reproductor de vídeo. Todas exponen una API imperativa —creas una instancia sobre un nodo, la mutas con métodos, la destruyes al final— que vive en un mundo distinto al del grafo reactivo. El puente entre ambos mundos es un patrón de tres tiempos que ya conoces pieza por pieza: onMount para instanciar cuando el DOM existe, onCleanup para destruir al desmontar, y un createEffect por cada prop para sincronizar los cambios sin recrear nada.

El patrón de tres tiempos

La librería imperativa tiene su propio ciclo: nace, cambia, muere. Tu trabajo es mapear ese ciclo a las primitivas de Solid sin dejar cabos sueltos. El montaje crea, los efectos sincronizan, la limpieza destruye.

flowchart TD
A[onMount cuando el DOM existe] --> B[crear la instancia sobre el nodo]
B --> C[un efecto por cada prop que sincronizar]
C --> D[cada efecto muta la instancia al cambiar la prop]
B --> E[onCleanup destruye la instancia al desmontar]
style A fill:#89b4fa,color:#11111b
style D fill:#a6e3a1,color:#11111b
style E fill:#f38ba8,color:#11111b

Lo importante es que la instancia se crea una sola vez y luego se muta, nunca se recrea en cada cambio de prop. Recrear un gráfico o un mapa en cada actualización sería caro y borraría su estado interno —zoom, selección, scroll—. El grano fino de Solid encaja perfecto aquí: cada prop tiene su efecto, y cada efecto empuja al mundo imperativo exactamente el cambio que le corresponde.

onMount instancia, onCleanup destruye

Toma un gráfico como caso concreto. La librería expone un constructor que recibe el nodo canvas y una configuración, métodos para actualizar, y un destroy. La instancia se guarda en una variable local del componente:

import { onMount, onCleanup } from "solid-js";
import { Chart } from "chart.js/auto";

function Grafico(props: { datos: number[]; leyenda: boolean }) {
  let lienzo!: HTMLCanvasElement;
  let grafico: Chart | undefined;

  onMount(() => {
    grafico = new Chart(lienzo, {
      type: "line",
      data: { labels: [], datasets: [{ data: props.datos }] },
      options: { plugins: { legend: { display: props.leyenda } } },
    });
    onCleanup(() => grafico?.destroy());   // libera canvas, listeners y animaciones
  });

  return <canvas ref={lienzo} />;
}

onMount es obligatorio, no opcional: la librería necesita un nodo insertado para medirlo y dibujar, y en el cuerpo del componente ese nodo aún no existe. onCleanup es igual de obligatorio: sin destroy, cada montaje deja atrás un canvas vivo, animaciones corriendo y listeners globales colgados. La pareja mantiene la correspondencia “mientras el componente vive, existe el gráfico”.

Un efecto por cada prop

La instancia ya existe; falta que reaccione a las props. Aquí está la parte que distingue a Solid: en vez de un único bloque que reconstruye todo cuando “algo” cambia, escribes un efecto por cada prop independiente, y cada uno muta solo su parte. Los declaras dentro de onMount, después de crear la instancia, para que solo arranquen cuando ya hay algo que mutar.

import { onMount, onCleanup, createEffect } from "solid-js";
import { Chart } from "chart.js/auto";

function Grafico(props: { datos: number[]; leyenda: boolean }) {
  let lienzo!: HTMLCanvasElement;
  let grafico: Chart | undefined;

  onMount(() => {
    grafico = new Chart(lienzo, {
      type: "line",
      data: { labels: [], datasets: [{ data: [] }] },
      options: { plugins: { legend: { display: props.leyenda } } },
    });

    createEffect(() => {
      grafico!.data.datasets[0].data = props.datos;   // se re-ejecuta al cambiar datos
      grafico!.update();
    });

    createEffect(() => {
      grafico!.options.plugins!.legend!.display = props.leyenda; // solo la leyenda
      grafico!.update();
    });

    onCleanup(() => grafico?.destroy());
  });

  return <canvas ref={lienzo} />;
}

Cada efecto rastrea únicamente la prop que lee: el primero se re-ejecuta cuando cambia props.datos y no le importa la leyenda; el segundo, al revés. Cambiar los datos no reinicia la leyenda ni viceversa, porque son suscripciones distintas. Esa separación es gratis en Solid y es justo lo que una librería imperativa necesita: mutaciones mínimas y dirigidas.

Un efecto creado dentro de onMount rastrea con normalidad —el untrack de onMount solo afecta a las lecturas síncronas de su cuerpo, no a los cómputos anidados— y pertenece al dueño del componente, así que su limpieza también corre al desmontar.

Cuando la sincronización de una prop es cara —redibujar miles de puntos— acota el efecto con on para controlar con exactitud qué lo dispara y no leer dentro más signals de los necesarios:

createEffect(on(() => props.datos, (datos) => {
  grafico!.data.datasets[0].data = datos;
  grafico!.update("none");    // sin animacion para grandes volumenes
}));

El patrón completo, de un vistazo: