prefer-destructured-store-props.md

pageClass	sidebarDepth	title	description	since
rule-details	0	svelte/prefer-destructured-store-props	destructure values from object stores for better change tracking & fewer redraws	v2.10.0

svelte/prefer-destructured-store-props

destructure values from object stores for better change tracking & fewer redraws

• 💡 Some problems reported by this rule are manually fixable by editor suggestions.

📖 Rule Details

This rule reports on directly accessing properties of a store containing an object in templates. These usages can instead be written as a reactive statement using destructuring to allow for more granular change-tracking and reduced redraws in the component.

An example of the improvements can be see in this REPL

<script>
  /* eslint svelte/prefer-destructured-store-props: "error" */
  import store from './store.js';
  // Svelte3/4
  $: ({ foo } = $store);
  // Svelte5 with Runes
  let foo = $derived($store.foo);
</script>

<!-- ✓ GOOD -->
{foo}

<!-- ✗ BAD -->
{$store.foo}

🔧 Options

Nothing

❤️ Compatibility

This rule was taken from @tivac/eslint-plugin-svelte.
This rule is compatible with @tivac/svelte/store-prop-destructuring rule.

🚀 Version

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

🔍 Implementation

• Rule source
• Test source