# svelte/prefer-writable-derived

Prefer using writable $derived instead of $state and $effect

  • ⚙️ This rule is included in "plugin:svelte/recommended".
  • 💡 Some problems reported by this rule are manually fixable by editor suggestions.

# 📖 Rule Details

This rule reports when you use a combination of $state and $effect to create a derived value that can be written to. It encourages using the more concise and clearer $derived syntax instead.

<script>
  /* eslint svelte/prefer-writable-derived: "error" */
  const { initialValue } = $props();

  // ✓ GOOD
  let value1 = $derived(initialValue);

  // ✗ BAD
  let value2 = $state(initialValue);
  $effect(() => {
    value2 = initialValue;
  });
</script>

The rule specifically looks for patterns where:

  1. You initialize a variable with $state()
  2. You then use $effect() or $effect.pre() to assign a new value to that same variable
  3. The effect function contains only a single assignment statement

When this pattern is detected, the rule suggests refactoring to use $derived() instead, which provides the same functionality in a more concise way.

# 🔧 Options

Nothing.

  • This rule has no options.

# 📚 Further Reading

# 🚀 Version

This rule was introduced in eslint-plugin-svelte v3.6.0

# 🔍 Implementation