React vs Vue - Async State, Effects and Custom Hooks

In this video CJ shows how he built the same app with both Vue and React. He focuses on comparing how we make asynchronous calls that update state. He shows examples of useEffect in React and watch in Vue. He also shows examples of lifecycle events like component mount and un-mount. See the full Vue vs React series here: https://www.youtube.com/playlist?list=PLLnpHn493BHGeUSbg-tjxVyMKQnIB0kVL 00:00 Intro 00:27 What will we build? 01:51 React Image Search / useEffect 03:39 React useEffect dispose function 04:21 Vue Image Search / watch 05:48 React useEffect gotchas 08:11 Vue watch options / immediate 08:36 React useEffect / component mount 08:56 Vue onMounted 09:14 Vue vs React - Lifecycle 09:36 Advanced Image Search 10:21 React custom hook 12:41 Vue custom hook 13:58 AbortController / canceling requests 15:04 React abortController / useRef 18:13 Vue AbortController 19:07 Vue script only gets called once 19:29 React hooks get called every render 19:42 Vue onUnmounted 20:07 Final Thoughts 21:23 Next Time 21:55 Thanks! View the code here: https://github.com/w3cj/vue-vs-react React useEffect | https://react.dev/reference/react/useEffect React useCallback | https://react.dev/reference/react/useCallback Vue watch | https://vuejs.org/guide/essentials/watchers.html Vue onMounted | https://vuejs.org/api/composition-api-lifecycle.html#onmounted Vue onUnmounted | https://vuejs.org/api/composition-api-lifecycle.html#onunmounted ------------------------------------------------------------------------------ Hit us up on Socials! https://www.syntax.fm/links Brought to you by Sentry - Use code "tastytreats" to get 2 months free - https://sentry.io/syntax #javascript #react #vuejs