Passing Stores

The previous tutorial introduced you mutable() to demonstrate that Qwik assumes all props are static to remain efficient.

Beyond the fact that typing mutable() is extra work, the previous example is also inefficient in its own way.

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.

Two benefits emerge by making the above change:

• The mutable() binding function is removed from the component.
• 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, you are forced to wrap them with mutable() to make the application work.