# svelte/no-reactive-reassign

disallow reassigning reactive values

# 📖 Rule Details

This rule aims to prevent unintended behavior caused by modification or reassignment of reactive values.

<script>
  /* eslint svelte/no-reactive-reassign: "error" */
  let value = 0;
  $: reactiveValue = value * 2;

  function handleClick() {
    /* ✓ GOOD */
    value++;
    /* ✗ BAD */
    
Assignment to reactive value 'reactiveValue'. (svelte/no-reactive-reassign)
reactiveValue = value * 3;
    
Assignment to reactive value 'reactiveValue'. (svelte/no-reactive-reassign)
reactiveValue++;
  }
</script>

<!-- ✓ GOOD -->
<input type="number" bind:value />
<!-- ✗ BAD -->
<input type="number" 
Assignment to reactive value 'reactiveValue'. (svelte/no-reactive-reassign)
bind:value={reactiveValue} />

# 🔧 Options

{
  "svelte/no-reactive-reassign": [
    "error",
    {
      "props": true
    }
  ]
}
  • props … If set to true, this rule warns against the modification of reactive value properties. Default is true.

# { "props": true }

<script>
  /* eslint svelte/no-reactive-reassign: ["error", { "props": true }] */
  let value = 0;
  $: reactiveValue = { value: value * 2 };

  function handleClick() {
    /* ✓ GOOD */
    value++;
    /* ✗ BAD */
    
Assignment to property of reactive value 'reactiveValue'. (svelte/no-reactive-reassign)
reactiveValue.value++;
    
Assignment to reactive value 'reactiveValue'. (svelte/no-reactive-reassign)
reactiveValue = { value: reactiveValue.value + 1 };
  }
</script>

<!-- ✓ GOOD -->
<input type="number" bind:value />
<!-- ✗ BAD -->
<input type="number" 
Assignment to property of reactive value 'reactiveValue'. (svelte/no-reactive-reassign)
bind:value={reactiveValue.value} />
<MyComponent 
Assignment to reactive value 'reactiveValue'. (svelte/no-reactive-reassign)
bind:objectValue={reactiveValue} />

# { "props": false }

<script>
  /* eslint svelte/no-reactive-reassign: ["error", { "props": false }] */
  let value = 0;
  $: reactiveValue = { value: value * 2 };

  function handleClick() {
    /* ✓ GOOD */
    value++;
    /* OK */
    reactiveValue.value++;
    /* ✗ BAD */
    
Assignment to reactive value 'reactiveValue'. (svelte/no-reactive-reassign)
reactiveValue = { value: reactiveValue.value + 1 };
  }
</script>

<!-- ✓ GOOD -->
<input type="number" bind:value />
<!-- OK -->
<input type="number" bind:value={reactiveValue.value} />
<!-- ✗ BAD -->
<MyComponent 
Assignment to reactive value 'reactiveValue'. (svelte/no-reactive-reassign)
bind:objectValue={reactiveValue} />

# 🚀 Version

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

# 🔍 Implementation