🦔

なぜvueのcomposablesはreactのhooksに比べて扱いやすく感じるのか(初学者向け)

2024/12/05に公開

React

Vue.js

tech

reactのhooksは難しく、vueのcomposablesは直感的

reactのstateはsetStateを実行しても、レンダリングが完了するまで値は古いままという特徴があります。これは特に複雑なhooksを実装する際に、実装する側も使用する側も考慮しなければいけない事が増えてしまい、難易度が上がりがちです。それに対してvueのcomposablesはそのような問題を考慮する必要がなく、直感的で扱いやすいです。

useCountによる比較

よくあるuseCountでvueのcomposablesとreactのhooksを比較してみます。

vueの実装

useCount.ts

import { computed, ref } from "vue"

export const useCount = () => {
    const count = ref(0)
    const nextCount = computed(() => count.value + 1)
    const addCount = ()=>{
        count.value++
    }

    return {
        count,
        nextCount,
        addCount
    }
}

App.vue

<script setup lang="ts">
import { useCount } from './useCount';

const {count, addCount, nextCount} = useCount()
const onClick = ()=>{
  addCount()
  window.alert(`ボタンを押してcountが${count.value}になりました。もう一度押すと${nextCount.value}になります。`)
}
</script>

<template>
  <button @click="onClick">add</button>
  <p>{{ count }}</p>
</template>

vueのplayground

初回の結果は「ボタンを押してcountが1になりました。もう一度押すと2になります。」です。
状態を変更する関数(addCount)を実行すると、countの値とnextCountの値がすぐに変更されるので直感的です。

reactの実装

useCount.ts

import { useState } from "react"

export const useCount = ()=>{
    const [count, setCount] = useState(0)
    const nextCount = count +1
    const addCount = ()=>{
        setCount((count) => count + 1)
    }
    return {count, nextCount, addCount}
}

App.tsx

import { useCount } from './useCount'

function App() {
  const {
    count,
    nextCount,
    addCount
  } = useCount()
  const onClick = ()=>{
    addCount()
    window.alert(`ボタンを押してcountが${count}になりました。もう一度押すと${nextCount}になります。`)
  }

  return (
      <button onClick={onClick}>
          count is {count}
      </button>
  )
}

export default App

reactのplayground

初回の結果は「ボタンを押してcountが0になりました。もう一度押すと1になります。」です。
状態を変更する関数(addCount)を実行しても、レンダリングが完了するまでは値は古いままです。

所感

個人的にはvueのcomposablesの方が直感的でreactより優れていると思います。