prefer-writable-derived.md

pageClass	sidebarDepth	title	description
rule-details	0	svelte/prefer-writable-derived	Prefer using writable $derived instead of $state and $effect

svelte/prefer-writable-derived

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

• ❗ This rule has not been released yet.
• ⚙️ 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

• Svelte Documentation on Reactivity Primitives
• Svelte RFC for Reactivity Primitives

🔍 Implementation

• Rule source
• Test source