Programming Tutorials

  The Hook: The "One-Time" Render Trap You are migrating a component from Svelte 4 to Svelte 5. You swap  export let  for the new  $props()  rune, adhering to the new syntax. It renders correctly on the first load. However, as parent components update the data, your child component stays stubborn. It refuses to update derived values, CSS classes, or logic dependent on those props. You console log the prop, and it looks correct. But the UI is stale. This is the most common architectural friction point in Svelte 5: treating  $props()  like a standard JavaScript object during initialization creates a  snapshot , not a subscription. The Why: Value Semantics vs. Signal Access To understand why this breaks, you must understand how Svelte 5 handles reactivity "under the hood." In Svelte 4, reactivity was component-scoped and compiler-driven. The compiler scanned for specific variable assignments. In Svelte 5, reactivity is  Signal-based  (via R...