Vue Composition API vs React Hooks - paulip114/blog GitHub Wiki

🔁 Vue Composition API vs React Hooks — Feature Equivalents

Vue API	React Equivalent	Explanation
ref()	useRef() or useState()	ref() in Vue tracks a single primitive or object reactively. In React, use: - useRef() for non-rerendering mutable values (e.g., DOM refs or timers) - useState() for reactive state that causes rerenders
reactive()	useState() (with object)	Vue makes an entire object reactive via Proxy. In React, you use useState() and update state immutably: js const [form, setForm] = useState({ name: '', age: 0 })
computed()	useMemo()	computed() is used for derived values that update reactively. In React, you use useMemo() to memoize derived values based on dependencies.
watch()	useEffect()	watch() watches reactive values and runs a side effect. In React, useEffect() is used with dependencies to watch for changes. Vue's watch(() => state.x, ...) is like useEffect(() => {...}, [x]).
onMounted()	useEffect(() => {...}, [])	Vue’s onMounted() runs once after the component is mounted. In React, useEffect with an empty dependency array replicates this behavior.

---

🔍 Code Comparison Examples

ref vs useState / useRef

Vue:

const count = ref(0)

React:

const [count, setCount] = useState(0)
// OR
const countRef = useRef(0) // if you don't want re-renders

---

computed vs useMemo

Vue:

const double = computed(() => count.value * 2)

React:

const double = useMemo(() => count * 2, [count])
// [count] means only re-run the useMemo function if count changes.
// [] double will always return the value from the first render

---

watch vs useEffect

Vue:

watch(() => user.value.name, (newVal) => {
  console.log('Name changed:', newVal)
})

React:

useEffect(() => {
  console.log('Name changed:', user.name)
}, [user.name])
// [user.name] means only run this effect when user.name changes

---

onMounted vs useEffect

Vue:

onMounted(() => {
  console.log('Component mounted')
})

React:

useEffect(() => {
  console.log('Component mounted')
}, [])
// let [] empty means runs once when the component loads

---

🧠 Summary

Vue	React
ref()	useRef() / useState()
reactive()	useState() with object
computed()	useMemo()
watch()	useEffect()
onMounted()	useEffect(() => {}, [])