Passing Stores

The previous tutorial introduced you how you could pass primitives and objects to components. In this tutorial, we will learn how to pass stores to components, which is way more efficient in terms of rerendering.

When you click on the +1 button, the <App> is re-rendered to update the <Display> bindings. The re-rendering of <App> is needed to update the props of <Display>, but this process doesn't update to what the user sees, so it is a waste of resources.

A better approach is to only re-render <Display> component by passing in the CountStore rather than the count value. Since the store reference never changes, the <App> component doesn't need to re-render.

Your task: Change the code to pass in store rather than store.count.

By making the above change, the <App> component doesn't need to be downloaded or re-rendered.

Best Practice

A best practice to follow in Qwik features passing a store to child components rather than individual primitives. When you use primitives, the parent component needs to rerender just to pass in the new value. When you pass in a store, the parent component doesn't need to rerender.

Next: Passing Closures

Edit Tutorial