# svelte/no-reactive-reassign

disallow reassigning reactive values

  • ⚙️ This rule is included in "plugin:svelte/recommended".

# 📖 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