From 61ed0697350f51ea97286942af7dec8efff9c3cd Mon Sep 17 00:00:00 2001 From: Stephane Date: Mon, 14 Aug 2023 09:44:44 +0200 Subject: [PATCH] Attempt cleared language in state management A commonly returning error on Discord is related to state preservation in pages due to misunderstandings how pages relate to components in regards to reactivity --- documentation/docs/20-core-concepts/50-state-management.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/documentation/docs/20-core-concepts/50-state-management.md b/documentation/docs/20-core-concepts/50-state-management.md index 250929d41199..024cc31e463b 100644 --- a/documentation/docs/20-core-concepts/50-state-management.md +++ b/documentation/docs/20-core-concepts/50-state-management.md @@ -117,7 +117,9 @@ Updating the context-based store value in deeper-level pages or components will If you're not using SSR (and can guarantee that you won't need to use SSR in future) then you can safely keep state in a shared module, without using the context API. -## Component state is preserved +## Component and Page states are preserved + +> In SvelteKit, pages and layouts are considered components and follow the same rules and limitations as normal Svelte components. When you navigate around your application, SvelteKit reuses existing layout and page components. For example, if you have a route like this... @@ -140,7 +142,7 @@ When you navigate around your application, SvelteKit reuses existing layout and
{@html data.content}
``` -...then navigating from `/blog/my-short-post` to `/blog/my-long-post` won't cause the component to be destroyed and recreated. The `data` prop (and by extension `data.title` and `data.content`) will change, but because the code isn't rerunning, `estimatedReadingTime` won't be recalculated. +...then navigating from `/blog/my-short-post` to `/blog/my-long-post` won't cause the component to be destroyed and recreated. Instead the `data` prop (and by extension `data.title` and `data.content`) will change as happens with regular Svelte component, and because the code isn't rerunning, `estimatedReadingTime` won't be recalculated. Instead, we need to make the value [_reactive_](https://learn.svelte.dev/tutorial/reactive-assignments):