svelte/props-derived

Why

The script of a Svelte 5 component runs once. const label = size === 'small' ? 'S' : 'L' reads the prop at creation and never again, so when the parent changes size the label stays wrong. The compiler warns about it (state_referenced_locally), but the warning is easy to miss in a long build log.

Fix

Wrap the expression in $derived(...) (or $derived.by for a block). If you really want the first value only, say so: let initial = $state(untrack(() => value)) or name it initialValue.

Examples

<!-- bad -->
<script>
  let { size, price, locale } = $props()
  const label = size === 'small' ? 'S' : 'L'
  const formatter = new Intl.NumberFormat(locale, { style: 'currency', currency: 'EUR' })
</script>
<!-- good -->
<script>
  let { size, price, locale } = $props()
  const label = $derived(size === 'small' ? 'S' : 'L')
  const formatter = $derived(new Intl.NumberFormat(locale, { style: 'currency', currency: 'EUR' }))
</script>

Sources

• Svelte docs, Best practices ($props)
• Svelte docs, Compiler warnings (state_referenced_locally)

Read it in the terminal

npx github:dawidolko/frontend-skills explain svelte/props-derived