Fixing Svelte Child Component Prop Updates in Version 5

Description

Learn why child component props may not update with parent state changes in Svelte 5 and how to correctly handle props reactivity for reliable UI updates. --- This video is based on the question https://stackoverflow.com/q/79430557/ asked by the user 'Alex' ( https://stackoverflow.com/u/376947/ ) and on the answer https://stackoverflow.com/a/79430563/ provided by the user 'brunnerh' ( https://stackoverflow.com/u/546730/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions. Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Svelte child component props doesn't update on parent state change Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/licensing The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/by-sa/4.0/ ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/by-sa/4.0/ ) license. If anything seems off to you, please feel free to drop me a comment under this video. --- Understanding the Problem In Svelte 5, developers may notice that child components do not reactively update when their parent component's state changes—even though the parent reflects the new state correctly. A common scenario involves passing a derived subset of an array from a parent to a child component, but the child's props appear stale. For example, the parent fetches data asynchronously and updates its state, but the child component showing a sliced version of the data does not update its display. Root Cause Improper destructuring of props: Using $props() and destructuring outside of a reactive declaration can cause props not to update. Modifying state inside $derived: Using mutable array methods like .splice() inside $derived breaks purity and reactivity. How to Fix It 1. Correctly Destructure Props In the child component, directly destructure $props() without intermediate variables, or wrap destructuring in $derived to ensure reactivity: [[See Video to Reveal this Text or Code Snippet]] This ensures the component reacts whenever items changes. 2. Avoid Mutating State in $derived The function passed to $derived should be pure and not mutate the source state. Do not do: [[See Video to Reveal this Text or Code Snippet]] Because .splice() mutates the original array, leading to unexpected side effects. Do this instead: [[See Video to Reveal this Text or Code Snippet]] Here, .slice() returns a new array without altering the original state. Summary Destructure props reactively using $props() directly or $derived. Avoid mutating parent state inside $derived; use pure functions like .slice(). These practices restore expected reactivity in child components under Svelte 5. By respecting Svelte's reactive model and immutability, you can reliably pass and update props between components.