Mutable Props

The example on the right is a simple counter. In this instance, the <Display> component is only responsible for showing the count value.

When you click on the +1 button the store.count increments, but nothing happens. This action should cause the <App> and <Display> components to re-render, but they don't with the current implementation.

By default Qwik assumes all property bindings are static. At the moment, there is no way for the runtime to tell if a property is static or if it changes during the application lifetime.

All properties are assumed to be static unless they are marked as mutable().

Why assume all properties are static?

Imagine that the <Counter> component is bound to a static value like 123:

<Counter value={123} />

From this example, <Counter> never re-renders because the value 123 never changes. As Qwik is serializing <Counter>, the runtime doesn't know if the component properties are static or dynamic.

If Qwik assumes the properties are dynamic by default, then runtime must serialize component props at all times. However, Qwik's priority is to minimize the amount of HTML sent to the client. If the runtime assumes props are static, then Qwik only needs to serialize the props as data changes.

So if the runtime defaults to viewing all props as static, how do you mark some data as dynamic? Props with changing data are wrapped with the mutable() binding function to provide the necessary runtime information to Qwik.

Your task: First, import the mutable function, then change <Display count={ store.count } /> to <Display count={mutable(store.count)} />.

While this approach works, it's better to not use mutable(). The next step explains why and shows you how to avoid using the mutable() binding function.