VanJSにはvan.deriveというAPIがあります。引数にコールバック関数を渡して、関数内で使用しているState変数の値が変わると、コールバック関数が実行されるというものです。ReactユーザーにとってはuseEffectやuseMemoのhooksと同じようなことができる、と言うと分かりやすいと思います。※正確には全く同じ動きではないので注意
ですが、実際にvan.deriveを使用するとReactのuseEffectやuseMemoより賢いと思う部分があったので、3点ご紹介したいと思います。
理由
1.第２引数不要
ReactのuseEffectやuseMemoは第2引数に、どの変数が変更された時に、コールバック関数を実行するか指定する必要があります。（第2引数を指定しないこともできるが、用途が変わってくるため今回は考えない）
例えばReactのuseEffectで、countの値が変更される度にコールバック関数を実行したい場合は、以下のように書きます。
useEffect(() => {
console.log(count)
}, [count])
しかしVanJSは第2引数を指定する必要はありません。コールバック関数内でState変数を使用していれば、その値が変更される度にコールバック関数が実行されます。以下の例ではcountの値が変更されると、自動的にコールバック関数が実行されます。
van.derive(() => {
console.log(count)
})
些細なことかもしれないですが、わざわざ変数を指定しなくて済むためコードの記述量が減りますし、変数の指定忘れによるバグが防げます。
2.useEffectとuseMemoのどちらにも対応可能
van.deriveはReactのuseEffectとuseMemoの両方を動きが実現できます。
useEffectの動きは1で説明したので省略。
ReactでuseMemoを使用する場合は、以下のように書きます。countの値が変更される度に、コールバック関数が実行されます。
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の値が変わります。
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では一緒に働いてくれる仲間を募集中です！
ご興味がある方は以下リンクよりご確認ください。