Cours Svelte et SvelteKit · Module 7: Cycle de vie
Valhalla - Le cycle de vie des composants
Dans cette leçon4
Bienvenue à Valhalla ! Tout comme les guerriers arrivent et repartent de ces salles, les composants ont leur propre cycle de vie - de la création à la destruction.
Cycle de vie dans Svelte
Composant créé
↓
onMount() ← Monté dans le DOM
↓
[vie] ← $effect.pre / $effect quand l'état change
↓
onDestroy() ← Retiré du DOMSvelte 5 n'a pas de hooks exécutés à chaque mise à jour du composant entier. À la place, les effets ($effect.pre, $effect) réagissent uniquement à l'état qu'ils utilisent - tu les découvriras en détail dans la prochaine leçon.
onMount - Arrivée à Valhalla
<script>
import { onMount } from 'svelte';
let data = $state(null);
onMount(() => {
console.log('Composant monté !');
// Récupérer les données
fetch('/api/warriors')
.then(r => r.json())
.then(d => data = d);
// Nettoyage (optionnel)
return () => {
console.log('Le composant va être démonté');
};
});
</script>onDestroy - Départ pour Ragnarok
<script>
import { onDestroy } from 'svelte';
const interval = setInterval(() => {
console.log('tick');
}, 1000);
onDestroy(() => {
clearInterval(interval);
console.log('Nettoyé !');
});
</script>Svelte 5 : $effect avec une fonction de nettoyage
$effect s'exécute après le montage du composant, et la fonction qu'il renvoie fait le ménage au démontage. Un effet qui ne lit aucun état s'exécute une seule fois, comme onMount et onDestroy réunis :
<script>
// L'effet ne lit aucun état, il s'exécute donc une fois après le montage
$effect(() => {
console.log('Monté !');
const interval = setInterval(() => {
console.log('tick');
}, 1000);
return () => {
clearInterval(interval);
console.log('Démonté !');
};
});
</script>Quand un effet lit un état (par exemple count), il se relance après chaque changement, et avant chaque nouvelle exécution il appelle sa fonction de nettoyage. Pour du code qui doit s'exécuter exactement une fois, onMount reste un bon choix.
La vie à Valhalla a son propre rythme - tout comme le cycle de vie des composants !
Code de cette leçon : App.svelte
<script>
// Valhalla - Cycle de vie du composant
// onMount, onDestroy et $effect avec une fonction de nettoyage
import { onMount, untrack } from 'svelte';
import Einherjar from './Einherjar.svelte';
let mounted = $state(false);
let showWarrior = $state(true);
let logs = $state([]);
// untrack : log peut être appelé même depuis un effet, et écrire dans logs
// ne devient pas sa dépendance (plus de détails dans la leçon 7_2)
function log(message) {
untrack(() => {
logs = [...logs, { time: new Date().toLocaleTimeString(), message }].slice(-8);
});
}
onMount(() => {
mounted = true;
log('onMount (App) - le Valhalla ouvre ses portes');
});
</script>
<main class="lifecycle">
<h1>Valhalla - Cycle de vie</h1>
<p class="subtitle">onMount, onDestroy, $effect</p>
<section>
<h2>Statut</h2>
<p>App monté : <strong>{mounted ? 'Oui' : 'Non'}</strong></p>
<button onclick={() => (showWarrior = !showWarrior)}>
{showWarrior ? 'Envoyer le guerrier au Ragnarök' : 'Rappeler le guerrier'}
</button>
</section>
{#if showWarrior}
<Einherjar onLog={log} />
{:else}
<p class="empty">Le guerrier est parti. Rappelle-le pour revoir onMount.</p>
{/if}
<section class="logs">
<h2>Journal du cycle de vie</h2>
{#each logs as entry}
<p><span class="time">{entry.time}</span> {entry.message}</p>
{/each}
</section>
</main>
<style>
.lifecycle {
font-family: 'Georgia', serif;
max-width: 600px;
margin: 0 auto;
padding: 2rem;
background: linear-gradient(135deg, #1a0a0a 0%, #2a1a0a 100%);
color: #e8d5b7;
min-height: 100vh;
}
h1 {
color: #ffd700;
text-align: center;
}
.subtitle {
text-align: center;
color: #8b7355;
}
section {
background: rgba(212, 175, 55, 0.1);
border: 1px solid #d4af37;
border-radius: 8px;
padding: 1rem;
margin: 1rem 0;
}
h2 {
color: #d4af37;
font-size: 1rem;
margin-top: 0;
}
strong {
color: #ffd700;
}
button {
padding: 0.5rem 1rem;
background: #3d2914;
color: #e8d5b7;
border: 1px solid #d4af37;
border-radius: 4px;
cursor: pointer;
}
.empty {
color: #8b7355;
font-style: italic;
}
.logs {
max-height: 250px;
overflow-y: auto;
}
.logs p {
margin: 0.25rem 0;
padding: 0.25rem 0.5rem;
background: rgba(0,0,0,0.3);
border-radius: 4px;
font-size: 0.9rem;
}
.time {
color: #8b7355;
font-family: monospace;
margin-right: 0.5rem;
}
</style>Entrées de la documentation utilisées dans cette leçon
Tu as repéré une erreur dans cette leçon ?
Teste tes connaissances
Réponds aux questions de cette leçon. Choisis une réponse pour voir tout de suite si elle est correcte.
1. Quand la fonction onMount est-elle appelée ?
2. Comment effectuer un cleanup dans onMount ?