Skip to content

Instantly share code, notes, and snippets.

@AlexVipond
Last active January 29, 2022 05:46
Show Gist options
  • Save AlexVipond/b3e6c39ab4e1ec7395114210ddcaff92 to your computer and use it in GitHub Desktop.
Save AlexVipond/b3e6c39ab4e1ec7395114210ddcaff92 to your computer and use it in GitHub Desktop.
Vue 3 effect timing APIs, and their React equivalents
Vue 3 effect timing API React equivalent
setup None
onMounted useEffect with an empty dependency list
onUpdated useEffect
onUnmounted Callback returned from useEffect with an empty dependency list
onBeforeMount None
onBeforeUpdate Render function, sort of
onBeforeUnmount None
onErrorCaptured None
onRenderTracked None
onRenderTriggered None
onActivated None
onDeactivated None
onServerPrefetch None
watch with flush set to sync None
watch with flush set to pre None
watch with flush set to post useLayoutEffect

React effect timing API Vue 3 equivalent
useEffect with a list of reactive dependencies Technically none, but you can typically use watch with flush set to pre to achieve the same goals with less risk of infinite render loops
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment