svelte

Fix Svelte 5 reactivity by refactoring code to use $state for local variables, $derived for computed values, and $effect for side effects, ensuring verifiable UI behavior and avoiding common stale UI anti-patterns.

Use SvelteKit form actions for progressive enhancement and data mutation, and route handlers in +server modules for custom API endpoints, combining both with depends/invalidation patterns to maintain correct data flow.

Replace Svelte 4 slots and event dispatchers by adopting Svelte 5 component patterns: use $props for data passing, $bindable for two-way binding, and snippet-based composition for flexible UI distribution.

Manage Svelte 5 side effects using the $effect rune for standard post-render operations and $effect.pre for pre-render updates, utilizing untrack to prevent unnecessary reactive tracking and performance issues.

Structure SvelteKit data loading by using server-only load functions for backend data fetching and universal load functions for shared client logic, applying depends/invalidation to refresh route data correctly.

Stale UI data in Svelte 5 often results from incorrect $derived usage or unnecessary tracking, which can be fixed by verifying reactive dependencies and using untrack to isolate non-reactive mutations.