# svelte/infinite-reactive-loop
Svelte runtime prevents calling the same reactive statement twice in a microtask. But between different microtask, it doesn’t prevent.
- ⚙️ This rule is included in
"plugin:svelte/recommended".
# 📖 Rule Details
Svelte runtime prevents calling the same reactive statement twice in a microtask.
But between different microtask, it doesn’t prevent.
This rule reports those possible infinite loop.
<script> /* eslint svelte/infinite-reactive-loop: "error" */ import {count }from './store.js'; import {tick }from 'svelte'; let a =0; // ✓ GOOD $:if (a <10) { a +=1; $count +=1; } $: (async ()=> { // You can update a state in the same micro task. a +=1; $count +=1; await new Promise((resolve)=> setTimeout(resolve,100)); })(); $: (async ()=> { await doSomething_ok(); })(); const doSomething_ok =async ()=> { await fetchFromServer(); // You can update a state even in different microtask // if you don't refer the state in reactive statement. a +=1; }; // ✗ BAD $: (async ()=> { await doSomething(); // Do not update a state in different micro task.Possibly it may occur an infinite reactive loop. (svelte/infinite-reactive-loop)a +=1;Possibly it may occur an infinite reactive loop. (svelte/infinite-reactive-loop)$count +=1; })(); $:tick(()=> {Possibly it may occur an infinite reactive loop. (svelte/infinite-reactive-loop)a =a +1;Possibly it may occur an infinite reactive loop. (svelte/infinite-reactive-loop)$count +=1; }); $: (async ()=> { console.log(a); // This rule checks caller function recursively. awaitPossibly it may occur an infinite reactive loop because this function may update `a`. (svelte/infinite-reactive-loop)doSomething_ng_1(); })(); const doSomething_ng_1 =async ()=> { a +=1; await fetchFromServer();Possibly it may occur an infinite reactive loop because this function may update `a`. (svelte/infinite-reactive-loop)doSomething_ng_2(); }; const doSomething_ng_2 = ()=> {Possibly it may occur an infinite reactive loop. (svelte/infinite-reactive-loop)a +=1; };</script># 🔧 Options
Nothing.
# 📚 Further Reading
- Svelte - Docs > COMPONENT FORMAT > 3. $: marks a statement as reactive
- Svelte - Docs > COMPONENT FORMAT > 4. Prefix stores with $ to access their values
# 🚀 Version
This rule was introduced in eslint-plugin-svelte v2.16.0