Updating state doesn't reflect in the UI + Feedback on Tutorials

[aderchox]

Here's the fiddle of my issue: https://jsfiddle.net/ujr51hze/
When I click on Tab 2, its index gets logged correctly, but the content area doesn't change.

What I've tried:
I tried to realize what was wrong by going through the tutorials of VanJS. But I'm still not sure what I'm missing. I think the tutorial section is a bit vague. The examples are really cool, but the tutorial isn't easy to understand.
For example, when using a state as child, the state itself (state) is used, but when using it in a prop, state.val is used. Why?
I also encountered this section which migh be related to my issue, however, it's also not clear to me at all:

When declaring a State-derived property for an on... event handler, you should wrap around the binding function with van._(...). Otherwise, the function you provide will be consider as the event handler, rather than the binding function for the State-derived property.

Even in its example code, one handler is wrapped in van._(), while the other one isn't.
I'm not very familiar with the technical Reactivity terms used in the documentation (e.g., binding function). Maybe you could explain a bit more what van._() is exactly?

[csm-kb]

Hey! From my current understanding, van._() allows the framework to perform state binding with the function you pass to it (e.g. () => div(stateVar.val)), instead of just passing the not-bound current state value. The framework doesn't just let you pass stateVal.var and automatically bind it to the element you're passing it, at least not outside of state-derived properties (e.g. { style = `${styleState.val}` }). The section on state-derived children being defined as functions lines up with this logic.

Under the hood, this means assigning to the function you give it a variable _isBindingFunc, which the framework then uses (here @ line 115) to bind the state value setter call to the DOM element (in this case, div) to allow it to react to when the state updates:

// from van.js
else if (protoOfV === funcProto && (!k.startsWith("on") || v._isBindingFunc))
      bind(() => (setter(v()), dom)) // internal function to bind the DOM to the state setter

So in your fiddle, modifying

div(
  { class: "tabs-active-content-area" },
  tabItems[activeIndex.val].content
  // this will only use the current snapshot of `activeIndex.val`,
  // without binding this div to the state
)

to be

div(
  { class: "tabs-active-content-area" },
  van._(() => tabItems[activeIndex.val].content)
  // the function inside returns the same value, but allows vanjs
  // to bind the div to the state setter and update when it is triggered
)

will bind () => tabItems[activeIndex.val].content to fire each time activeIndex.val's setter is called -- making the div DOM element react as you would expect.

(correct me if this intuition is wrong!)

[csm-kb]

So in the same vein as state-derived children, you could actually just pass

div(
  { class: "tabs-active-content-area" },
  () => tabItems[activeIndex.val].content
)

and function the same way, too. van._() isn't actually needed here!

[aderchox]

Thank you @csm-kb . This fixes it. But something I haven't quite understood yet about the van._()'s example code in the tutorial is how come the handler for oninput doesn't need van._(), but the handler for onclick does.

[MrVoltz]

What van._ does here is that every time action.val changes from 👍 to 👎 and vice versa, it completely replaces the click event handler with a different one. This could be rewritten as {onclick: () => action.val === "👍" ? ++counter.val : --counter.val}, that way the event handler stays the same and action.val is checked inside it after the user clicks the button.