Skip to content

Commit 00ed32a

Browse files
doc: Storing State - edit pass (#782)
* edit pass * Update packages/docs/src/pages/tutorial/store/basic/index.mdx * Apply suggestions from code review
1 parent 52fb23d commit 00ed32a

File tree

1 file changed

+12
-9
lines changed
  • packages/docs/src/pages/tutorial/store/basic

1 file changed

+12
-9
lines changed

packages/docs/src/pages/tutorial/store/basic/index.mdx

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,23 @@ title: Storing State
33
layout: tutorial
44
---
55

6-
Applications need to store state to be useful. (Otherwise, they are just static pages.)
6+
Applications need to store state to be useful, otherwise they're just static pages.
77

8-
Qwik needs to track the application state for two reasons:
9-
1. Application state needs to be serialized on application pause (and deserialize on application resume.)
10-
2. Qwik needs to create subscriptions on stores so that it can know which components need to be re-rendered (if Qwik would not track subscription information then it would have to re-render the whole application which would defeat the lazy-loading.)
8+
Qwik tracks application state for two reasons:
119

12-
The component on the right looks like it should work, but it does not because the `counter` is just a regular objects, which does not create subscriptions. As a result, Qwik does not know when `counter.count` changes and it does not know that it has to re-render the `<App>`.
10+
1. To serialize data when the application pauses on the server, and deserialize as the application resumes on the client.
1311

14-
Wrap the `counter` in `useStore()` to enable dependency tracking and automatic re-rendering.
12+
1. To create subscriptions on stores so that Qwik knows which components to re-render. If Qwik didn't track subscriptions, it would have to re-render the whole application - which would defeat the purpose of lazy-loading.
13+
14+
The component on the right doesn't work yet because `counter` is just a plain object with no subscriptions. As a result, Qwik doesn't know when `counter.count` changes, and therefore doesn't know to re-render the `<App>` component.
15+
16+
> **Your task:** Wrap `counter` in `useStore()` to enable dependency tracking and automatic re-rendering.
1517
1618
## Serialization
1719

18-
Open the HTML tab to see what information was serialized by the server. find `<script type="qwik/json">` for serialization information. While the exact serialization format is not important and subject to change notice two things:
20+
Open the *HTML* tab to see what information is serialized by the server. Look in the `<script type="qwik/json">` block for serialization information and notice that:
21+
1922
1. `{count: 0}` is in the serialized state.
20-
2. At the end of the serialized state are `subs` which contain `"count"`. These subscriptions tell Qwik which component needs to be re-rendered when the state changes.
23+
1. At the end of the serialized state are `subs` which contain `"count"`. These subscriptions tell Qwik which component to re-render as the state changes.
2124

22-
Qwik state is in no way tied to the component that created it. The state can be passed to any component in the application and Qwik will correctly create subscriptions and correctly re-render only the affected components.
25+
Qwik state is in no way tied to the component that created it. The state can be passed to any component in the application and Qwik creates the needed subscriptions and re-renders only the affected components.

0 commit comments

Comments
 (0)