# svelte/infinite-reactive-loop

Svelte runtime prevents calling the same reactive statement twice in a microtask. But between different microtask, it doesn’t prevent.

# 📖 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.
    await 
Possibly 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

# 🚀 Version

This rule was introduced in eslint-plugin-svelte v2.16.0

# 🔍 Implementation