Vue vs React - Sharing State and Complex State Updates

In this video CJ shows how he built the same app with both Vue and React. He focuses on comparing how we share state between pages / components and also how me update state in deeply nested objects / arrays.

See the full Vue vs React series here: https://www.youtube.com/playlist?list=PLLnpHn493BHGeUSbg-tjxVyMKQnIB0kVL

00:00 Intro
01:20 Brought to you by Sentry
01:51 Lifting State Up
02:20 Prop Drilling
03:08 React Context API
04:00 Vue shared module
04:40 Vue provide / inject
05:18 React Context API Example
08:49 Vue provide / inject example
11:54 React Rendering Considerations
13:14 React use-context-selector
14:54 Vue Rendering Considerations
16:06 React - Persisting State Across Pages
17:01 Vue - Persisting State Across Pages
18:34 React State Management Libraries
19:08 React zustand Example
20:50 Vue pinia Example
21:53 destructuring pinia stores
22:43 Deeply Nested State Updates
25:51 React - Mutable State Updates
26:33 structuredClone in JS
27:06 State Updates in zustand
27:26 More Examples
27:46 Next Time
28:09 Thanks!

React Docs | https://react.dev/learn/passing-data-deeply-with-context Vue Docs | https://vuejs.org/guide/components/provide-inject.html

zustand | https://docs.pmnd.rs/zustand/getting-started/introduction pinia | https://pinia.vuejs.org/

View the code here: https://github.com/w3cj/vue-vs-react