# 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';
  $: ({ foo } = $store);
</script>

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

<!-- ✗ BAD -->
{
Destructure foo from $store for better change tracking & fewer redraws (svelte/prefer-destructured-store-props)
$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