Exploring Valtio, another module state library

Valtio is a library primarily used for module state, which is the same as Zustand.

As we learned in Chapter 7, Use Case Scenario 1 – Zustand, we create a store in Zustand as follows:

const store = create(() => ({
  count: 0,
  text: "hello",
}));

The store variable has some properties, one of which is setState. With setState, we can update the state. For example, the following is incrementing the count value:

store.setState((prev) => ({
  count: prev.count + 1,
}))

Why do we need to use setState to update a state value? Because we want to update the state immutably. Internally, the previous setState works like the following:

moduleState = Object.assign({}, moduleState, {
  count: moduleState.count + 1
});

This is the way to update an object immutably.

Let's imagine a case where we don't need to follow the immutable update rule. In this case...