noSvelteUnnecessaryStateWrap

JavaScript (and super languages)

Caution

This rule is part of the nursery group. This means that it is experimental and the behavior can change at any time.

Summary

• Rule available since: v2.5.2
• Diagnostic Category: lint/nursery/noSvelteUnnecessaryStateWrap
• This rule has an unsafe fix.
• The default severity of this rule is information.
• This rule belongs to the following domains:
  • svelte
• Sources:
  • Same as svelte/no-unnecessary-state-wrap

How to configure

biome.json

{
  "linter": {
    "rules": {
      "nursery": {
        "noSvelteUnnecessaryStateWrap": "error"
      }
    }
  }
}

Description

Disallow unnecessary $state wrapping of reactive classes.

Several classes exported from svelte/reactivity — such as SvelteMap, SvelteSet, and SvelteDate — are already deeply reactive without the $state rune. Wrapping them in $state(...) is redundant and may mislead readers into thinking the reactivity comes from the rune rather than the class itself.

Use the additionalReactiveClasses option to extend this list with custom reactive classes from your own codebase.

Use allowReassign: true if you need to reassign the variable itself after declaration, which requires $state to track the reference change.

Examples

Invalid

<script>
import { SvelteMap } from "svelte/reactivity";
const map = $state(new SvelteMap());
</script>

code-block.svelte:2:13 lint/nursery/noSvelteUnnecessaryStateWrap  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ SvelteMap is already reactive, wrapping it in $state() is unnecessary.
  
    1 │ import { SvelteMap } from “svelte/reactivity”;
  > 2 │ const map = $state(new SvelteMap());
      │             ^^^^^^^^^^^^^^^^^^^^^^^
    3 │ 
  
  ℹ Classes from svelte/reactivity track their own mutations without needing a $state wrapper.
  
  ℹ 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.
  
  ℹ Unsafe fix: Remove the unnecessary $state() wrapper.
  
    2 │ const·map·=·$state(new·SvelteMap());
      │             -------              -  

Valid

<script>
import { SvelteMap } from "svelte/reactivity";
const map = new SvelteMap();
</script>

Options

allowReassign

When true, suppresses the autofix for variables that are reassigned after declaration. Because reassigning a $state-wrapped value changes the binding itself, removing $state would break reactivity for those reassignments. The diagnostic still fires — only the unsafe autofix is withheld.

Default: false

biome.json

{
  "linter": {
    "rules": {
      "nursery": {
        "noSvelteUnnecessaryStateWrap": {
          "level": "on",
          "options": {
            "allowReassign": true
          }
        }
      }
    }
  }
}

<script>
import { SvelteMap } from "svelte/reactivity";
const map = $state(new SvelteMap());
</script>

code-block.svelte:2:13 lint/nursery/noSvelteUnnecessaryStateWrap  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ SvelteMap is already reactive, wrapping it in $state() is unnecessary.
  
    1 │ import { SvelteMap } from “svelte/reactivity”;
  > 2 │ const map = $state(new SvelteMap());
      │             ^^^^^^^^^^^^^^^^^^^^^^^
    3 │ 
  
  ℹ Classes from svelte/reactivity track their own mutations without needing a $state wrapper.
  
  ℹ 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.
  
  ℹ Unsafe fix: Remove the unnecessary $state() wrapper.
  
    2 │ const·map·=·$state(new·SvelteMap());
      │             -------              -  

<script>
import { SvelteMap } from "svelte/reactivity";
let map = $state(new SvelteMap());
map = new SvelteMap();
</script>

code-block.svelte:2:11 lint/nursery/noSvelteUnnecessaryStateWrap ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ SvelteMap is already reactive, wrapping it in $state() is unnecessary.
  
    1 │ import { SvelteMap } from “svelte/reactivity”;
  > 2 │ let map = $state(new SvelteMap());
      │           ^^^^^^^^^^^^^^^^^^^^^^^
    3 │ map = new SvelteMap();
    4 │ 
  
  ℹ Classes from svelte/reactivity track their own mutations without needing a $state wrapper.
  
  ℹ 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.
  

additionalReactiveClasses

An array of additional class names to treat as already reactive (beyond the built-in svelte/reactivity classes). Use this to extend the rule with custom reactive classes from your own codebase.

biome.json

{
  "linter": {
    "rules": {
      "nursery": {
        "noSvelteUnnecessaryStateWrap": {
          "level": "on",
          "options": {
            "additionalReactiveClasses": [
              "MyReactiveStore"
            ]
          }
        }
      }
    }
  }
}

Invalid

<script>
const store = $state(new MyReactiveStore());
</script>

code-block.svelte:1:15 lint/nursery/noSvelteUnnecessaryStateWrap  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ MyReactiveStore is already reactive, wrapping it in $state() is unnecessary.
  
  > 1 │ const store = $state(new MyReactiveStore());
      │               ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Classes from svelte/reactivity track their own mutations without needing a $state wrapper.
  
  ℹ 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.
  
  ℹ Unsafe fix: Remove the unnecessary $state() wrapper.
  
    1 │ const·store·=·$state(new·MyReactiveStore());
      │               -------                    -  

Valid

<script>
const store = new MyReactiveStore();
</script>

Related links

• Disable a rule
• Configure the code fix
• Rule options
• Source Code (Edit this Page)
• Test Cases