Guías Técnicas

Entendiendo la función onMount() en Svelte

¿Qué es onMount()?

La función onMount() en Svelte es una función de ciclo de vida que se ejecuta una vez que el componente ha sido montado en el DOM. Es útil cuando se necesita ejecutar código una vez que el componente está completamente disponible en el navegador, como obtener datos de una API, interactuar con elementos del DOM o inicializar bibliotecas de terceros.

¿Cuándo usar onMount()?

onMount() es ideal para realizar tareas como:

  Funciones principales del ciclo de vida:

  • Hacer peticiones a una API después de que el componente se ha cargado.
  • Interactuar con el DOM cuando los elementos ya están disponibles.
  • Configurar bibliotecas de terceros que requieren que el DOM esté completamente listo.

Sintaxis básica

La función onMount() se importa desde el módulo svelte y se puede utilizar de la siguiente manera:

js 
# Importando la función onMount desde svelte
import { onMount } from 'svelte';

# Utilizando la función onMount
onMount(() => {
// Código a ejecutar cuando el componente es montado
});

La función recibe una función callback como argumento que se ejecutará cuando el componente se haya montado.

Ejemplos prácticos

1. Cargar datos desde una API usando onMount()

En este escenario, utilizamos onMount() para cargar datos desde una API cuando el componente se monta.

js 
<script>
import { onMount } from 'svelte';

let usuarios = [];

onMount(async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/users');
  usuarios = await response.json();
});
</script>

<h1>Lista de Usuarios</h1>
<ul>
{#each usuarios as usuario}
  <li>{usuario.name}</li>
{/each}
</ul>

2. Interacción con el DOM usando onMount()

Aquí, se muestra cómo acceder y modificar un elemento del DOM después de que el componente se ha montado.

js 
<script>
import { onMount } from 'svelte';

let count = 0;

onMount(() => {
  const button = document.querySelector('button');
  button.addEventListener('click', () => {
    count += 1;
    alert(`Has hecho clic ${count} veces.`);
  });
});
</script>

<button>Haz clic en mí</button>

3. Iniciar una biblioteca de terceros

A continuación, se muestra como onMount() se usa para inicializar una biblioteca de gráficos en un componente Svelte.

js 
<script>
import { onMount } from 'svelte';

onMount(() => {
  const chart = new Chart(document.getElementById('myChart'), {
    type: 'line',
    data: {
      labels: ['Enero', 'Febrero', 'Marzo'],
      datasets: [{
        label: 'Ventas',
        data: [10, 15, 7],
        borderColor: 'rgba(75, 192, 192, 1)',
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    });
});
</script>

<canvas id="myChart"></canvas>
  Consideraciones importantes

  • onMount() se ejecuta solo una vez durante el ciclo de vida del componente. Si necesitas ejecutar algo cada vez que el componente se monta, deberías usar otras funciones como afterUpdate.
  • Se puede usar onMount() para realizar tareas que no bloquean el renderizado inicial del componente, asegurando una experiencia de usuario más fluida.
  • Puedes usar onDestroy() para limpiar cualquier recurso cuando el componente sea destruido.

  Conclusión

La función onMount() es una herramienta fundamental en Svelte para interactuar con el ciclo de vida del componente. Es ideal para tareas como cargar datos, modificar el DOM o configurar bibliotecas de terceros.