Question on using state-derived on... event handlers

[deepakmecheri]

In the VanJS tutorial page it is mentioned that

When declaring a State-derived property for an on... event handler, you should wrap around the binding function with van.derive(...) (i.e.: defining an ad-hoc derived state). Otherwise, the function you provide will be consider as the event handler, rather than the binding function for the State-derived property.

But when I run the example that is given on the page by removing the van.derive wrapper, it still works!
i.e

button({onclick: van.derive(() => action.val === "👍" ?
      () => ++counter.val : () => --counter.val)}, "Run"),

and

button({onclick: () => action.val === "👍" ? ++counter.val : --counter.val}, "Run"),

seem to work practically the same. Can someone please help me understand what the actual meaning of this section is.

[Tao-VanJS]

Hi @deepakmecheri,

Thanks for reaching out!

The 2 pieces of code you pasted have equivalent semantic. But their underlying implementations are different.

Code 1:

button({onclick: van.derive(() => action.val === "👍" ?
      () => ++counter.val : () => --counter.val)}, "Run"),

The click event handler will be different depending on the val of the action state. When the val of the action state is changed to "👍", the click event handler will become () => ++counter.val; When the val of the action state is changed to "👎", the click event handler will become () => --counter.val.

Code 2:

button({onclick: () => action.val === "👍" ? ++counter.val : --counter.val}, "Run"),

The click event handler remains the same regardless of the val of the action state, which is () => action.val === "👍" ? ++counter.val : --counter.val. That is, we look at the val of the action state inside the click event handler to determine how to change the counter state.

In theory, if the click event handler is frequently executed while the action state is changed less often. The implementation in Code 1 is slightly more efficient, as we don't need to look at the action state inside the click event handler.

Hope it explains :-)

[deepakmecheri]

Yes that clears things up. Thanks for the help @Tao-VanJS