svelte-core-bestpractices

Use $state for reactive data and $derived for computed values in Svelte to reduce boilerplate and bugs. This approach ensures consistent use of modern reactive patterns, replacing older, deprecated methods for managing component state.

The best way to structure Svelte components is by following modern patterns for event handling and CSS scoping. Applying these specific best practices ensures robust code and avoids common styling and integration pitfalls.

You need $effect in Svelte for side effects, but it requires careful handling to avoid reactivity loops. Following core best practices ensures you apply it correctly and avoid deprecated approaches that cause performance issues.

To audit an existing Svelte component, review its usage of $state, $derived, $effect, events, and CSS. This ensures alignment with modern Svelte patterns and identifies deprecated approaches that need refactoring.

Modern Svelte reactivity works with external library integrations by applying specific patterns for state and events. Following these integration best practices ensures your components remain fast and robust without introducing common library conflicts.