Edit tutorial

Recursive Store

This example features a store that contains other objects rather than just primitives.

Because useStore() tracks deep reactivity by default, Arrays and Objects inside the store will also be reactive.

For useStore() to track all nested properties, it needs to allocate a lot of Proxy objects. This can be a performance issue if you have a lot of nested properties.

In that case, you can pass the additional argument: {deep: false} to useStore to only track the top-level properties.

Your task: Add {deep: false} as a second argument to the useStore() function and modify event handlers to assign new values to the top-level properties of the store.

Building preview

Refreshing App output

Compiling the latest client and SSR result for your current code.

No console activity yet

Interact with the app or trigger a render to see client and SSR messages here.