Les effets sont des fonctions qui sont exécutées lors que l'état se met à jour, et peuvent être
utilisé pour faire des choses comme appeler les librairies tierces, dessiner sur des éléments
`<canvas>`, ou faire des appels réseau. Ils ne sont joués que dans le navigateur, jamais pendant le
rendu côté serveur.

De manière générale, vous ne devriez _pas_ mettre à jour d'état au sein d'un effet, car cela rendra
votre code plus imbriqué et augmentera le risque de boucle infinie. Si vous êtes amené•e à faire
cela, voir la section [quand ne pas utiliser d'effet](#When-not-to-use-$effect) pour découvrir des
approches alternatives.

Vous pouvez créer un effet avec la rune `$effect`
([demo](/playground/untitled#H4sIAAAAAAAAE31S246bMBD9lZF3pSRSAqTVvrCAVPUP2sdSKY4ZwJJjkD0hSVH-vbINuWxXfQH5zMyZc2ZmZLVUaFn6a2R06ZGlHmBrpvnBvb71fWQHVOSwPbf4GS46TajJspRlVhjZU1HqkhQSWPkHIYdXS5xw-Zas3ueI6FRn7qHFS11_xSRZhIxbFtcDtw7SJb1iXaOg5XIFeQGjzyPRaevYNOGZIJ8qogbpe8CWiy_VzEpTXiQUcvPDkSVrSNZz1UlW1N5eLcqmpdXUvaQ4BmqlhZNUCgxuzFHDqUWNAxrYeUM76AzsnOsdiJbrBp_71lKpn3RRbii-4P3f-IMsRxS-wcDV_bL4PmSdBa2wl7pKnbp8DMgVvJm8ZNskKRkEM_OzyOKQFkgqOYBQ3Nq89Ns0nbIl81vMFN-jKoLMTOr-SOBOJS-Z8f5Y6D1wdcR8dFqvEBdetK-PHwj-z-cH8oHPY54wRJ8Ys7iSQ3Bg3VA9azQbmC9k35kKzYa6PoVtfwbbKVnBixBiGn7Pq0rqJoUtHiCZwAM3jdTPWCVtr_glhVrhecIa3vuksJ_b7TqFs4DPyriSjd5IwoNNQaAmNI-ESfR2p8zimzvN1swdCkvJHPH6-_oX8o1SgcIDAAA=))

```svelte
<script>
	let size = $state(50);
	let color = $state('#ff3e00');

	let canvas;

	$effect(() => {
		const context = canvas.getContext('2d');
		context.clearRect(0, 0, canvas.width, canvas.height);

		// ceci va être rejoué lorsque `color` ou `size` change
		context.fillStyle = color;
		context.fillRect(0, 0, size, size);
	});
</script>

<canvas bind:this={canvas} width="100" height="100"></canvas>
```

Lorsque Svelte exécute une fonction d'effet, il suit les morceaux d'état (ou d'état dérivé) qui sont
lus (à moins qu'ils ne soient lus avec [`untrack`](svelte#untrack)), et ré-exécute la fonction
lorsque cet état évolue plus tard.

> [!NOTE] Si vous avez des difficultés à comprendre pourquoi votre `$effect` est ré-exécuté ou non,
> voir la section [comprendre les dépendances](#Understanding-dependencies). Les effets sont
> déclenchés différemment des blocs `$:` auxquels vous êtes habitué•es si vous venez de Svelte 4.

### Comprendre le cycle de vie

Vos effets sont joués après le montage du composant dans le DOM, et dans une
[micro-tâche](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide) après
la mise à jour d'un état. Les ré-exécutions sont "batchées" (c-à-d que changer `color` et `size` au
même moment ne va pas déclencher deux ré-exécutions distinctes), et se produisent après que toutes
les modifications du DOM ont été appliquées.

Vous pouvez utiliser `$effect` partout, juste pas à la racine d'un composant, tant que `$effect` est
appelée lors de l'exécution d'un effet parent.

> [!NOTE] Svelte utilise les effets en interne pour représenter de la logique et des expressions
> dans vos templates — c'est comme ça que `<h1>bonjour {name} !</h1>` se met à jour lorsque `name`
> change.

Un effet peut renvoyer une _fonction de nettoyage_ qui sera jouée immédiatement avant la
ré-exécution de l'effet
([demo](/playground/untitled#H4sIAAAAAAAAE42SQVODMBCF_8pOxkPRKq3HCsx49K4n64xpskjGkDDJ0tph-O8uINo6HjxB3u7HvrehE07WKDbiyZEhi1osRWksRrF57gQdm6E2CKx_dd43zU3co6VB28mIf-nKO0JH_BmRRRVMQ8XWbXkAgfKtI8jhIpIkXKySu7lSG2tNRGZ1_GlYr1ZTD3ddYFmiosUigbyAbpC2lKbwWJkIB8ZhhxBQBWRSw6FCh3sM8GrYTthL-wqqku4N44TyqEgwF3lmRHr4Op0PGXoH31c5rO8mqV-eOZ49bikgtcHBL55tmhIkEMqg_cFB2TpFxjtg703we6NRL8HQFCS07oSUCZi6Rm04lz1yytIHBKoQpo1w6Gsm4gmyS8b8Y5PydeMdX8gwS2Ok4I-ov5NZtvQde95GMsccn_1wzNKfu3RZtS66cSl9lvL7qO1aIk7knbJGvefdtIOzi73M4bYvovUHDFk6AcX_0HRESxnpBOW_jfCDxIZCi_1L_wm4xGQ60wIAAA==)).

```svelte
<script>
	let count = $state(0);
	let milliseconds = $state(1000);

	$effect(() => {
		// ceci sera recréé lorsque `milliseconds` change
		const interval = setInterval(() => {
			count += 1;
		}, milliseconds);

		return () => {
			// si une fonction de nettoyage est fourni, il sera rejoué
			// a) immédiatement avant que l'effet ne se rejoue
			// b) lorsque que le composant est démonté
			clearInterval(interval);
		};
	});
</script>

<h1>{count}</h1>

<button onclick={() => (milliseconds *= 2)}>ralentir</button>
<button onclick={() => (milliseconds /= 2)}>accélérer</button>
```

Les fonctions de nettoyage sont aussi nettoyées lorsque l'effet est détruit, ce qui se produit
lorsque le parent est détruit (par exemple, si le composant est démonté), ou si un effet parent est
ré-exécuté.

### Comprendre les dépendances [!VO]Understanding dependencies

`$effect` détecte automatiquement toute valeur réactive (`$state`, `$derived`, `$props`) qui est lue
de manière _synchrone_ à l'intérieur de son corps de fonction (en les incluant indirectement, via
l'appel de la fonction) et l'enregistre en tant que
dépendance. Lorsque ces dépendances changent, l'`$effect` va planifier une ré-exécution.

Si `$state` et `$derived` sont utilisées directement dans un `$effect` (par exemple, durant la
création d'une [classe réactive](https://svelte.dev/docs/svelte/$state#Classes)), ces valeurs ne
seront _pas_ traitées comme dépendances.

Les valeurs qui sont lues de manière _asynchrones_ — après un `await` ou à l'intérieur d'un
`setTimeout`, par exemple — ne seront pas considérées comme dépendances. Ici, le canvas sera repeint
lorsque `color` change, mais pas lorsque `size` change
([démo](/playground/untitled#H4sIAAAAAAAAE31T246bMBD9lZF3pWSlBEirfaEQqdo_2PatVIpjBrDkGGQPJGnEv1e2IZfVal-wfHzmzJyZ4cIqqdCy9M-F0blDlnqArZjmB3f72XWRHVCRw_bc4me4aDWhJstSlllhZEfbQhekkMDKfwg5PFvihMvX5OXH_CJa1Zrb0-Kpqr5jkiwC48rieuDWQbqgZ6wqFLRcvkC-hYvnkWi1dWqa8ESQTxFRjfQWsOXiWzmr0sSLhEJu3p1YsoJkNUcdZUnN9dagrBu6FVRQHAM10sJRKgUG16bXcGxQ44AGdt7SDkTDdY02iqLHnJVU6hedlWuIp94JW6Tf8oBt_8GdTxlF0b4n0C35ZLBzXb3mmYn3ae6cOW74zj0YVzDNYXRHFt9mprNgHfZSl6mzml8CMoLvTV6wTZIUDEJv5us2iwMtiJRyAKG4tXnhl8O0yhbML0Wm-B7VNlSSSd31BG7z8oIZZ6dgIffAVY_5xdU9Qrz1Bnx8fCfwtZ7v8Qc9j3nB8PqgmMWlHIID6-bkVaPZwDySfWtKNGtquxQ23Qlsq2QJT0KIqb8dL0up6xQ2eIBkAg_c1FI_YqW0neLnFCqFpwmreedJYT7XX8FVOBfwWRhXstZrSXiwKQjUhOZeMIleb5JZfHWn2Yq5pWEpmR7Hv-N_wEqT8hEEAAA=)) :

```ts
// @filename: index.ts
declare let canvas: {
	width: number;
	height: number;
	getContext(type: '2d', options?: CanvasRenderingContext2DSettings): CanvasRenderingContext2D;
};
declare let color: string;
declare let size: number;

// ---cut---
$effect(() => {
	const context = canvas.getContext('2d');
	context.clearRect(0, 0, canvas.width, canvas.height);

	// cet effet sera rejoué lorsque `color` change...
	context.fillStyle = color;

	setTimeout(() => {
		// ... mais pas lorsque `size` change
		context.fillRect(0, 0, size, size);
	}, 0);
});
```

Un effet est seulement rejoué lorsque l'objet qu'il lit change, pas lorsqu'une propriété de cet
objet change. (If vous souhaitez observer les changement _à l'intérieur_ d'un objet lors de vos
développements, vous pouvez utiliser [`$inspect`]($inspect).)

```svelte
<script>
	let state = $state({ value: 0 });
	let derived = $derived({ value: state.value * 2 });

	// ceci sera joué une seule fois, car `state` n'est jamais réassigné (seulement muté)
	$effect(() => {
		state;
	});

	// ceci sera rejoué à chaque fois que `state.value` change...
	$effect(() => {
		state.value;
	});

	// ... et ceci également, car `derived` est un nouvel objet à chaque fois
	$effect(() => {
		derived;
	});
</script>

<button onclick={() => (state.value += 1)}>
	{state.value}
</button>

<p>Le double de {state.value} vaut {derived.value}</p>
```

Un effet dépend uniquement des valeurs qu'il a lues la dernière fois qu'il a été joué. Ceci a des
conséquences intéressantes pour les effets qui impliquent du code conditionnel.

Par exemple, si `condition` vaut `true` dans le code ci-dessous, le code dans le bloc `#if` sera
joué et `color` sera ré-évalué. Dans ce cas, n'importe quel changement sur `condition` ou `color`
[va déclencher la ré-exécution de
l'effet](/playground/untitled#H4sIAAAAAAAAE21RQW6DMBD8ytaNBJHaJFLViwNIVZ8RcnBgXVk1xsILTYT4e20TQg89IOPZ2fHM7siMaJBx9tmaWpFqjQNlAKXEihx7YVJpdIyfRkY3G4gB8Pi97cPanRtQU8AuwuF_eNUaQuPlOMtc1SlLRWlKUo1tOwJflUikQHZtA0klzCDc64Imx0ANn8bInV1CDhtHgjClrsftcSXotluLybOUb3g4JJHhOZs5WZpuIS9gjNqkJKQP5e2ClrR4SMdZ13E4xZ8zTPOTJU2A2uE_PQ9COCI926_hTVarIU4hu_REPlBrKq2q73ycrf1N-vS4TMUsulaVg3EtR8H9rFgsg8uUsT1B2F9eshigZHBRpuaD0D3mY8Qm2BfB5N2YyRzdNEYVDy0Ja-WsFjcOUuP1HvFLWA6H3XuHTUSmmDV2--0TXonxsKbp7G9C6R__NONS-MFNvxj_d6mBAgAA).

À l'inverse, si `condition` vaut `false`, `color` ne sera pas ré-évalué, et l'effet ne sera rejoué
une nouvelle fois _que si_ `condition` change.

```ts
// @filename: ambient.d.ts
declare module 'canvas-confetti' {
	interface ConfettiOptions {
		colors: string[];
	}

	function confetti(opts?: ConfettiOptions): void;
	export default confetti;
}

// @filename: index.js
// ---cut---
import confetti from 'canvas-confetti';

let condition = $state(true);
let color = $state('#ff3e00');

$effect(() => {
	if (condition) {
		confetti({ colors: [color] });
	} else {
		confetti();
	}
});
```

## `$effect.pre`

Dans de rares cas, vous pourriez avoir besoin d'exécuter votre code _avant_ que le DOM ne soit mis à
jour. Pour cela, nous avons accès à la rune `$effect.pre` :

```svelte
<script>
	import { tick } from 'svelte';

	let div = $state();
	let messages = $state([]);

	// ...

	$effect.pre(() => {
		if (!div) return; // pas encore monté

		// référence à la longueur du tableau `messages` afin que ce code soit rejoué lorsque celle-ci
		// change
		messages.length;

		// scroll automatique lorsque de nouveaux messages sont ajoutés
		if (div.offsetHeight + div.scrollTop > div.scrollHeight - 20) {
			tick().then(() => {
				div.scrollTo(0, div.scrollHeight);
			});
		}
	});
</script>

<div bind:this={div}>
	{#each messages as message}
		<p>{message}</p>
	{/each}
</div>
```

Le timing mis à part, `$effect.pre` fonctionne exactement comme `$effect`.

## `$effect.tracking`

La rune `$effect.tracking` est une fonctionnalité avancée qui vous informe de si le code est exécuté
au sein d'un contexte de suivi (_tracking_), comme un effet ou bien dans le template
([démo](/playground/untitled#H4sIAAAAAAAACn3PwYrCMBDG8VeZDYIt2PYeY8Dn2HrIhqkU08nQjItS-u6buAt7UDzmz8ePyaKGMWBS-nNRcmdU-hHUTpGbyuvI3KZvDFLal0v4qvtIgiSZUSb5eWSxPfWSc4oB2xDP1XYk8HHiSHkICeXKeruDDQ4Demlldv4y0rmq6z10HQwuJMxGVv4mVVXDwcJS0jP9u3knynwtoKz1vifT_Z9Jhm0WBCcOTlDD8kyspmML5qNpHg40jc3fFryJ0iWsp_UHgz3180oBAAA=))
:

```svelte
<script>
	console.log('lors de la mise en place du composant :', $effect.tracking()); // false

	$effect(() => {
		console.log('dans l\'effet :', $effect.tracking()); // true
	});
</script>

<p>dans le template: {$effect.tracking()}</p> <!-- true -->
```

C'est notamment utilisé pour implémenter des abstractions comme
[`createSubscriber`](/docs/svelte/svelte-reactivity#createSubscriber), qui servent à créer des
gestionnaires permettant de mettre à jour des valeurs réactives _seulement_ si ces valeurs sont
trackées (plutôt que, par exemple, simplement lues dans un gestionnaire d'évènement).

## `$effect.root`

La rune `$effect.root` est une fonctionnalité avancée qui crée un scope non suivi qui ne
s'auto-nettoie pas. Cela est utile pour les effets imbriqués que vous souhaitez contrôler
manuellement. Cette rune permet également la création d'effets en dehors de la phase
d'initialisation du composant.

```js
const destroy = $effect.root(() => {
	$effect(() => {
		// mise en place
	});

	return () => {
		// nettoyage
	};
});

// plus tard...
destroy();
```

## Quand ne pas utiliser `$effect` [!VO]When not to use `$effect`

En général, `$effect` est plutôt considéré comme un dernier recours — pratique pour des choses comme
les analytics ou la manipulation directe du DOM — plutôt qu'un outil que vous devriez utiliser
souvent. En particulier, évitez de vous en servir pour synchroniser un état. Plutôt que faire
ceci...

```svelte
<script>
	let count = $state(0);
	let doubled = $state();

	// ne faites pas ça !
	$effect(() => {
		doubled = count * 2;
	});
</script>
```

... faites ceci :

```svelte
<script>
	let count = $state(0);
	let doubled = $derived(count * 2);
</script>
```

> [!NOTE] Pour des choses plus compliquées qu'une simple expression comme `count * 2`, vous pouvez
> aussi utiliser `$derived.by`.

Si vous utilisez un effet parce que vous souhaitez réassigner une valeur dérivée (pour construire
une interface optimiste par exemple), notez que [les valeurs dérivées peuvent être réassignées
directement]($derived#Overriding-derived-values) depuis Svelte 5.25.

Vous pourriez être tenté•e de faire des choses tordues avec les effets pour lier une valeur à une
autre. L'exemple suivant montre deux inputs pour "argent dépensé" et "argent restant" qui sont
connectés l'un à l'autre. Si vous en mettez un à jour, l'autre s'ajuste automatiquement. N'utilisez
pas d'effets pour faire ça
([démo](/playground/untitled#H4sIAAAAAAAACpVRy26DMBD8FcvKgUhtoIdeHBwp31F6MGSJkBbHwksEQvx77aWQqooq9bgzOzP7mGTdIHipPiZJowOpGJAv0po2VmfnDv4OSBErjYdneHWzBJaCjcx91TWOToUtCIEE3cig0OIty44r5l1oDtjOkyFIsv3GINQ_CNYyGegd1DVUlCR7oU9iilDUcP8S8roYs9n8p2wdYNVFm4csTx872BxNCcjr5I11fdgonEkXsjP2CoUUZWMv6m6wBz2x7yxaM-iJvWeRsvSbSVeUy5i0uf8vKA78NIeJLSZWv1I8jQjLdyK4XuTSeIdmVKJGGI4LdjVOiezwDu1yG74My8PLCQaSiroe5s_5C2PHrkVGAgAA).

```svelte
<script>
	let total = 100;
	let spent = $state(0);
	let left = $state(total);

	$effect(() => {
		left = total - spent;
	});

	$effect(() => {
		spent = total - left;
	});
</script>

<label>
	<input type="range" bind:value={spent} max={total} />
	{spent}/{total} dépensé
</label>

<label>
	<input type="range" bind:value={left} max={total} />
	{left}/{total} restant
</label>
```

Utilisez plutôt des callbacks `oninput` ou — encore mieux — des [liaisons de
fonctions](bind#Function-bindings) lorsque c'est possible
([démo](/playground/untitled#H4sIAAAAAAAACo1SMW6EMBD8imWluFMSIEUaDiKlvy5lSOHjlhOSMRZeTiDkv8deMEEJRcqdmZ1ZjzzxqpZgePo5cRw18JQA_sSVaPz0rnVk7iDRYxdhYA8vW4Wg0NnwzJRdrfGtUAVKQIYtCsly9pIkp4AZ7cQOezAoEA7JcWUkVBuCdol0dNWrEutWsV5fHfnhPQ5wZJMnCwyejxCh6G6A0V3IHk4zu_jOxzzPBxBld83PTr7xXrb3rUNw8PbiYJ3FP22oTIoLSComq5XuXTeu8LzgnVA3KDgj13wiQ8taRaJ82rzXskYM-URRlsXktejjgNLoo9e4fyf70_8EnwncySX1GuunX6kGRwnzR_BgaPNaGy3FmLJKwrCUeBM6ZUn0Cs2mOlp3vwthQJ5i14P9st9vZqQlsQIAAA==)).

```svelte
<script>
	let total = 100;
	let spent = $state(0);
	let left = $state(total);

	function updateSpent(value) {
		spent = value;
		left = total - spent;
	}

	function updateLeft(value) {
		left = value;
		spent = total - left;
	}
</script>

<label>
	<input type="range" bind:value={() => spent, updateSpent} max={total} />
	{spent}/{total} dépensé
</label>

<label>
	<input type="range" bind:value={() => left, updateLeft} max={total} />
	{left}/{total} restant
</label>
```

Si vous devez absolument mettre à jour un `$state` dans un effet et que cela déclenche une boucle
infinie parce que vous lisez et écrivez un même `$state`, utilisez [untrack](svelte#untrack).