useVisibleTask$

El hook useVisibleTask$ nos permite ejecutar código una vez el cliente se haya cargado. Es decir, que ya tendremos acceso a por ejemplo window o document Opcionalmente, al igual que useTask$, le puedes pasar el parámetro track, para poder ejecutar el código de dentro cada vez que el valor que se está observando cambie. Échale un vistazo al siguiente proyecto que hice con una librería de animaciones llamada motion y con Qwik: Qwik Article Filter.

En este caso, para animar un objeto necesitamos poder acceder a él desde el DOM, y por ello usamos el hook useVisibleTask$. En este caso, le pasamos el parámetro track, para que se ejecute cada vez que el valor de selectedCategory o selectedTerm cambie. Eso es el equivalente al array de dependencias del useEffect de React.

   // https://github.com/manuelsanchezweb/qwik-article-filter/blob/main/src/routes/index.tsx

    useVisibleTask$(({ track }) => {
      track(selectedCategory);
      track(selectedTerm);
  
      const li = document.querySelectorAll("li");
      if (!li[0]) return;
  
      animate(
        li,
        { opacity: [0, 1], scale: [0, 1] },
        { delay: stagger(0.1), easing: "ease-in-out" }
      );
    });
          

La siguiente lección que vamos a ver utiliza un hook llamado useComputed$, que nos permite hacer una especie de useVisibleTask$ con tracking por defecto y que nos permite retornar un valor.