Skip to main content
GoodFirstPicks
DashboardIssuesReposLeaderboard

GoodFirstPicks by Leaveitblank © 2026

CreatorRequest a RepoPrivacy PolicyTerms of Service
`{@const}` inside `{#each}` goes stale when prop-derived value is only consumed inside an array callback | GoodFirstPicks

`{@const}` inside `{#each}` goes stale when prop-derived value is only consumed inside an array callback

sveltejs/svelte 1 comments 7d ago
View on GitHub
mediumopenScope: somewhat clearSkill match: maybeSvelteTypeScript

Why this is a good first issue

The issue involves reactivity in Svelte's legacy mode, which requires understanding of internal mechanisms.

AI Summary

The issue describes a bug where `{@const}` inside `{#each}` does not update correctly when a prop-derived value is only consumed inside an array callback in Svelte's legacy mode. The problem is clear, but fixing it requires understanding Svelte's reactivity system and the differences between legacy and runes modes. The maintainer has indicated that this works correctly in runes mode, suggesting the issue is specific to legacy mode.

Issue Description

Describe the bug

A {@const} inside {#each} does not invalidate when its reactive dependency arrives via a prop and that dependency is only referenced inside an array callback (.find(), .filter(), .some(), etc.) rather than in the outer expression.

From the template's perspective the prop changed, a sibling {@const} that reads the prop directly updates correctly, but the {@const} whose expression only touches the prop inside a callback closure stays frozen at its previous value.

Required conditions

Both must be present:

  1. The reactive dependency is a prop — does not reproduce when the same value is a local variable or a store.
  2. That prop value appears only inside the callback of the array method — removing it from inside and placing it in the outer expression fixes the staleness.

No transition, no {#if} toggle, no async wrapper needed.

Reproduction

Link to REPL https://svelte.dev/playground/9e909f44f22a406a80a639c6ecd69496?version=latest

The playground shows both the buggy and the fixed pattern side by side, driven by the same prop. Click any button — selectedItemId updates correctly in both sections, but only the Fixed section reflects the change in the derived selectedItem.

Expected behavior

Clicking any button updates selectedItemId. Both sections should then resolve selectedItem and show the correct seat count.

Actual behavior

selectedItemId updates in both sections. The Bug section never shows seats — selectedItem stays undefined on every click. The Fixed section works correctly.

Workaround

Make the prop-derived scalar appear in the outer expression before the callback:

<!-- Buggy: selectedItemId hidden inside callback -->
{@const selectedItem = group.items.find((item) => item.id === selectedItemId)}

<!-- Fixed: selectedItemId visible in outer expression -->
{@const selectedItem = selectedItemId && group.items.find((item) => item.id === selectedItemI

Want to work on this?

Claim this issue to let others know you're working on it. You'll earn 20 points when you complete it!

Risk Flags

  • requires understanding of reactivity in Svelte
  • legacy mode vs runes mode
Loading labels...

Details

Points20 pts
Difficultymedium
Scopesomewhat clear
Skill Matchmaybe
Test Focusedno