How to handle state_referenced_locally for static props

[tuyuritio]

I'm using Svelte 5 within an Astro project.

I pass a locale prop from Astro to a Svelte component, and this locale never changes during the component's lifecycle.

<script>
  import { getRelativeLocaleUrl } from 'astro:i18n';
  import { getTranslator } from '$lib/i18n';

  let { locale } = $props();

  // Warning: state_referenced_locally
  // But strictly necessary for initialization
  const t = getTranslator(locale); 
  const homeUrl = getRelativeLocaleUrl(locale, '/');
</script>

<a href={homeUrl}>{t('home')}</a>

Should I wrap these in $derived() even though I know they will never re-calculate?

[brunnerh]

If you know that the variable never changes (and you don't want to future-proof either), you can suppress the warning:

// svelte-ignore state_referenced_locally
const t = getTranslator(locale);

But, given that this is more verbose and not great if things do change later, just adding a $derived might not be a bad idea.

[tuyuritio]

I considered both approaches, but in this scenario, using either svelte-ignore or $derived essentially feels like just ignoring the error.

However, I use locale in almost every single Svelte component. This means I would have to add an ignore rule every time locale appears, which feels really clunky.

Maybe it would be better if I opened an issue for this?

[brunnerh]

If you use it everywhere, it probably should be a context instead of a prop.

Multiple issues about this have been opened already which have been closed, so adding another one will probably not help.

• Allow suppressing state_referenced_locally on a per-case basis #17279
• New state_referenced_locally warnings with svelte 5.45.3 #17289 (a lot of discussion here)
• Unactionable state_referenced_locally warning when $state(prop) #17296
• v5.45.3 breaks using prop inside $state (state_referenced_locally error) #17316