Understanding van.derive

[ceving]

I have a problem to understand how derive works. My current understanding is, that derive gets a closure. In the arbitrary code of that closure somewhere states are read. And although derive is no JavaScript parser it seems to be able to know which states are used in the code of the closure in order to update the derived state. How is this possible?

[Tao-VanJS]

See this piece of source code for the mechanism: https://github.com/vanjs-org/van/blob/main/src/van.js#L11.

Also, you are encouraged to watch this 7-minute video: https://www.youtube.com/watch?v=Oh2IEVqarHs, which is a good walkthrough on how VanJS is implemented.

[ceving]

I saw this runAndCaptureDeps but I still do not understand how this is possible. For example if the closure contains this code:

if state1.val
  return state2.val;
else
  return state3.val;

How is it possible to collect all three states by just running this code? If state1 is true only state1 and state2 are visited. And if state1 is false only state1 and state3 are visited. How is it possible to collect all three states?

[Tao-VanJS]

Please see https://vanjs.org/advanced#conditional-state-binding.

Basically, we're collecting dependency states every time the binding function is being executed. Thus if state1.val is true, the binding function will be re-triggered when state1 or state2 changes. If state1.val is false, the binding function will be re-triggered when state1 or state3 changes.

[kwameopareasiedu]

I'd like to add that if u r coming from React;

• Using van.derive() for side effects works similarly to useEffect()
• Using van.derive() for another derived state works similarly to useMemo()