noSvelteIgnoredUnsubscribe (JavaScript)

Language JavaScript (and super languages)

Summary

Rule available since: v2.6.6
Diagnostic Category: lint/nursery/noSvelteIgnoredUnsubscribe
This rule doesn’t have a fix.
The default severity of this rule is warning.
This rule belongs to the following domains:
- svelte
Sources:
- Same as svelte/no-ignored-unsubscribe

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noSvelteIgnoredUnsubscribe": "error"
6
      }
7
    }
8
  }
9
}

Description

Disallow ignoring the function returned by a store’s subscribe() method.

Calling subscribe() on a Svelte store returns a function that stops the subscription. If you don’t keep this function, you can never stop the subscription: the store keeps calling your callback and keeps it in memory after you no longer need it. This is a memory leak.

The rule reports a subscribe() call when its result is not used, for example when it isn’t saved in a variable, returned, or passed to another function.

Examples

Invalid

1
<script>
2
import { count } from "./stores.js";
3

4
count.subscribe((value) => {
5
    console.log(value);
6
});
7
</script>

code-block.svelte:4:7 lint/nursery/noSvelteIgnoredUnsubscribe ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ The function returned by subscribe() is ignored.
  
    2 │ import { count } from "./stores.js";
    3 │ 
  > 4 │ count.subscribe((value) => {
      │       ^^^^^^^^^
    5 │     console.log(value);
    6 │ });
  
  ℹ Without this function, the subscription can't be stopped, so the store keeps calling the callback and keeps it in memory after it's no longer needed.
  
  ℹ Save the returned function and call it when you no longer need the subscription, for example when the component is destroyed.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

Valid

1
<script>
2
import { onDestroy } from "svelte";
3
import { count } from "./stores.js";
4

5
const unsubscribe = count.subscribe((value) => {
6
    console.log(value);
7
});
8

9
onDestroy(unsubscribe);
10
</script>

References

Svelte stores