svelte/derived-not-effect

Dlaczego

An effect runs after the update, so the synced value is stale for one render, the component updates twice, and two pieces of state can drift apart. Effects that write state are the usual start of update loops (effect_update_depth_exceeded) and make the data flow hard to follow.

Poprawka

Declare the value with $derived(expression), or $derived.by(() => { ... }) for several statements. Deriveds can be overridden by assignment (an optimistic value) and recompute when their inputs change. Keep $effect for work outside Svelte: a canvas, a third-party widget (better: {@attach}), analytics.

Przykłady

<!-- bad -->
<script>
  let { items } = $props()
  let visible = $state([])
  $effect(() => { visible = items.filter((item) => !item.hidden) })
</script>
<!-- good -->
<script>
  let { items } = $props()
  let visible = $derived(items.filter((item) => !item.hidden))
</script>

Źródła

• Svelte docs, $effect (when not to use $effect)
• Svelte docs, Best practices ($derived and $effect)

Przeczytaj w terminalu

npx github:dawidolko/frontend-skills explain svelte/derived-not-effect