VanJSにはvan.deriveというAPIがあります。引数にコールバック関数を渡して、関数内で使用しているState変数の値が変わると、コールバック関数が実行されるというものです。ReactユーザーにとってはuseEffectやuseMemoのhooksと同じようなことができる、と言うと分かりやすいと思います。※正確には全く同じ動きではないので注意

ですが、実際にvan.deriveを使用するとReactのuseEffectやuseMemoより賢いと思う部分があったので、3点ご紹介したいと思います。

理由

1.第２引数不要

ReactのuseEffectやuseMemoは第2引数に、どの変数が変更された時に、コールバック関数を実行するか指定する必要があります。（第2引数を指定しないこともできるが、用途が変わってくるため今回は考えない）

例えばReactのuseEffectで、countの値が変更される度にコールバック関数を実行したい場合は、以下のように書きます。

React

useEffect(() => {
  console.log(count)
}, [count])

しかしVanJSは第2引数を指定する必要はありません。コールバック関数内でState変数を使用していれば、その値が変更される度にコールバック関数が実行されます。以下の例ではcountの値が変更されると、自動的にコールバック関数が実行されます。

VanJS

van.derive(() => {
  console.log(count)
})

些細なことかもしれないですが、わざわざ変数を指定しなくて済むためコードの記述量が減りますし、変数の指定忘れによるバグが防げます。

2.useEffectとuseMemoのどちらにも対応可能

van.deriveはReactのuseEffectとuseMemoの両方を動きが実現できます。

useEffectの動きは1で説明したので省略。

ReactでuseMemoを使用する場合は、以下のように書きます。countの値が変更される度に、コールバック関数が実行されます。

React

const calculateExpensiveValue = useMemo(() => {
  let result = 0

  for (let i = 0; i < count * 100000000; i++) {
    result += i;
  }

  return result
}, [count])

VanJSでuseMemoの動きを実現したければ、同じように変数を宣言して、returnで値を返せばOKです。第２引数は不要です。以下の例でも、countの値が変更されると、自動的にコールバック関数が実行され、calculateExpensiveValueの値が変わります。

VanJS

const calculateExpensiveValue = van.derive(() => {
  let result = 0

  for (let i = 0; i < count.val * 100000000; i++) {
    result += i
  }

  return result
})

3.最小限の関数の実行

これは実際の動きを見た方が分かりやすいと思うので、DEMOを用意しました。ブラウザの検証ツールでコンソールログを見て、どの条件の時にコールバック関数が実行されるか確認してみてください。

Reactの場合はtoggle、toggle2、toggle3のどの値が変更されても必ずコールバック関数が実行されます。

VanJSの場合はtoggleがfalseの場合はtoggle2やtoggle3の値を変更してもコールバック関数は実行されません。これはtoggleがfalseの場合、必ずif文の最初の条件のtoggle1.valが偽になり、その後の条件の!toggle2.val && !toggle3.valの値を確認する必要が無くなるためです。

まとめ

VanJSのvan.deriveのAPIが、ReactのuseEffectやuseMemoより賢いと思う点を３つ紹介しました。正確には同じ動きをする訳では無いため注意が必要ですが、van.deriveは極力パフォーマンスを考慮して作られているのかなと感じました。

最後に

GoQSystemでは一緒に働いてくれる仲間を募集中です！

ご興味がある方は以下リンクよりご確認ください。