diff --git a/sitegen/tutorial.ts b/sitegen/tutorial.ts index d332e07..bd294b5 100644 --- a/sitegen/tutorial.ts +++ b/sitegen/tutorial.ts @@ -182,6 +182,12 @@ van.add(document.body, Table({ }, returns: ["The created derived ", Symbol("State"), " object."], }), + p("Note that: Since ", Link(VanJS(), " 1.5.0", "https://github.com/vanjs-org/van/discussions/290"), ", we have changed the execution of state derivation from synchronous to asynchronous as an optimization to avoid potentially unnecessary derivations. That is, instead of executing state derivations immediately, the derivations are scheduled to execute as soon as the next event cycle of browser context (i.e.: after the current call stack is cleared, which is equivalent to ", InlineJs("setTimeout(..., 0)"), "). The effect of the asynchronous derivation can be illustrated by the code below:"), + Js(`const a = van.state(1) +const b = van.derive(() => a.val * 2) +a.val = 2 +console.log("b.val =", b.val) // Expecting 2 +setTimeout(() => console.log("b.val =", b.val), 10) // Expecting 4`), H3("Side effect"), p(Symbol("van.derive"), " can be used to declare side effects as well. You can discard the return value of ", Symbol("van.derive"), " if you are not interested. The code below is a modified ", Symbol("Counter App"), " which logs the counter to console whenever it changes:"), JsFile("effect.code.js"), diff --git a/tutorial.html b/tutorial.html index 7f7b582..4683bfa 100644 --- a/tutorial.html +++ b/tutorial.html @@ -147,7 +147,11 @@

} van.add(document.body, DerivedState()) -

Demo:

Try on jsfiddle

API reference: van.derive

Signaturevan.derive(f) => <the created derived state>
DescriptionCreates a derived State object based on the derivation function f. The val of the derived state is always in sync with the result of f. i.e.: whenever the val of its dependency changes, f will be called to update the val of the derived state, synchronously.
Parameters
  • f - The derivation function, which takes no parameter and returns a single value.
ReturnsThe created derived State object.

Side effect

van.derive can be used to declare side effects as well. You can discard the return value of van.derive if you are not interested. The code below is a modified Counter App which logs the counter to console whenever it changes:

const {button, span} = van.tags
+

Demo:

Try on jsfiddle

API reference: van.derive

Signaturevan.derive(f) => <the created derived state>
DescriptionCreates a derived State object based on the derivation function f. The val of the derived state is always in sync with the result of f. i.e.: whenever the val of its dependency changes, f will be called to update the val of the derived state, synchronously.
Parameters
  • f - The derivation function, which takes no parameter and returns a single value.
ReturnsThe created derived State object.

Note that: Since VanJS 1.5.0, we have changed the execution of state derivation from synchronous to asynchronous as an optimization to avoid potentially unnecessary derivations. That is, instead of executing state derivations immediately, the derivations are scheduled to execute as soon as the next event cycle of browser context (i.e.: after the current call stack is cleared, which is equivalent to setTimeout(..., 0)). The effect of the asynchronous derivation can be illustrated by the code below:

const a = van.state(1)
+const b = van.derive(() => a.val * 2)
+a.val = 2
+console.log("b.val =", b.val) // Expecting 2
+setTimeout(() => console.log("b.val =", b.val), 10) // Expecting 4

Side effect

van.derive can be used to declare side effects as well. You can discard the return value of van.derive if you are not interested. The code below is a modified Counter App which logs the counter to console whenever it changes:

const {button, span} = van.tags
 
 const Counter = () => {
   const counter = van.state(0)
diff --git a/tutorial/index.html b/tutorial/index.html
index 7f7b582..4683bfa 100644
--- a/tutorial/index.html
+++ b/tutorial/index.html
@@ -147,7 +147,11 @@ 

 }
 
 van.add(document.body, DerivedState())
-

Demo:

Try on jsfiddle

API reference: van.derive

Signaturevan.derive(f) => <the created derived state>
DescriptionCreates a derived State object based on the derivation function f. The val of the derived state is always in sync with the result of f. i.e.: whenever the val of its dependency changes, f will be called to update the val of the derived state, synchronously.
Parameters
  • f - The derivation function, which takes no parameter and returns a single value.
ReturnsThe created derived State object.

Side effect

van.derive can be used to declare side effects as well. You can discard the return value of van.derive if you are not interested. The code below is a modified Counter App which logs the counter to console whenever it changes:

const {button, span} = van.tags
+

Demo:

Try on jsfiddle

API reference: van.derive

Signaturevan.derive(f) => <the created derived state>
DescriptionCreates a derived State object based on the derivation function f. The val of the derived state is always in sync with the result of f. i.e.: whenever the val of its dependency changes, f will be called to update the val of the derived state, synchronously.
Parameters
  • f - The derivation function, which takes no parameter and returns a single value.
ReturnsThe created derived State object.

Note that: Since VanJS 1.5.0, we have changed the execution of state derivation from synchronous to asynchronous as an optimization to avoid potentially unnecessary derivations. That is, instead of executing state derivations immediately, the derivations are scheduled to execute as soon as the next event cycle of browser context (i.e.: after the current call stack is cleared, which is equivalent to setTimeout(..., 0)). The effect of the asynchronous derivation can be illustrated by the code below:

const a = van.state(1)
+const b = van.derive(() => a.val * 2)
+a.val = 2
+console.log("b.val =", b.val) // Expecting 2
+setTimeout(() => console.log("b.val =", b.val), 10) // Expecting 4

Side effect

van.derive can be used to declare side effects as well. You can discard the return value of van.derive if you are not interested. The code below is a modified Counter App which logs the counter to console whenever it changes:

const {button, span} = van.tags
 
 const Counter = () => {
   const counter = van.state(0)