# svelte/infinite-reactive-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.
    a += 1;
    $count += 1;
  })();

  $: tick(() => {
    a = a + 1;
    $count += 1;
  });

  $: (async () => {
    console.log(a);
    // This rule checks caller function recursively.
    await doSomething_ng_1();
  })();

  const doSomething_ng_1 = async () => {
    a += 1;
    await fetchFromServer();
    doSomething_ng_2();
  };

  const doSomething_ng_2 = () => {
    a += 1;
  };
</script>