React の useMemo は Vue.js の computed に近いのではないかという説

はじめに

React.jsを触らないといけない今日この頃。useMemoというReact hookに出会った。これはメモ化した値を返してくれるやつ。漠然とキャッシュで値を保持できて、いろんなものの表示速度が上がるのかなって思ってた。

だけど、それ以外にも、Vue.jsのcomputedみたいに値を加工して値を返すみたいなことができることに気づいた。やっと気づいたのこの考え方によりReactの初心者として一歩進めた気がした。

ReactのuseMemoがVue.jsのcomputedみたいな感じに見える例：

正しく動くかは置いといて。以下のコードは、stateから何か値を取得して、新しい値を返す仕組み。 }, [state]);と書くことによって、stateに変更がある度に、oksが再計算されて新しい加工した値を返してくれる。

function App() {
  const { state, dispatch } = useReducer(reducer, initialState);
  const oks = useMemo(() => {
    return state.fuga.filter(f => f.done);
  }, [state]);

  return (
    <div>
      {
        oks.map((f) => (
          <p>{f.name}</p>
        ))
      }
    </div>
  )
}

まとめ

この使い方がuseMemoの正しい使い方は分からないが、今後は使っていきたい。

ちなみにVue.jsのcomputed

これも正しく動くかは分からないけど。書いとく。

<template>
  <div>
    <p v-for="f in oks">{{ f.name }}</p>
  </div>
</template>

<script>
export default {
  props: ['state'],
  computed: {
    oks: () => this.state.fuga.filter(f => f.done)
  }
}
</script>