Vue vs React - 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