React vs Vue - 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: • Vue vs React
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 | react.dev/lear...
Vue Docs | vuejs.org/guid...
zustand | docs.pmnd.rs/z...
pinia | pinia.vuejs.org/
View the code here: github.com/w3c...
------------------------------------------------------------------------------
Hit us up on Socials!
www.syntax.fm/...
Brought to you by Sentry - Use code "tastytreats" to get 2 months free - sentry.io/syntax
#javascript #react #vuejs

[@grinsk3ks]

This is the best Vue advertisement you can get. React is basically workaround after workaround.

[@freeottis]

I wonder how long before vue is bloated and we have to look for a new, simpler framework. It’s a cycle.

[@St0rMsk]

So I am working with react for like 2 years. The fact, that I have managed to learn Vue 3 in maybe 4-5 weeks and them migrate production App that we use at work from Vue3 options to Vue3 composition script setup API(that's a mouthful) and add Router and Pinia (hands down, the best global state managment) within weeks is unreal. I wish we would create more Vue apps.

[@ojvribeiro]

It is such a pleasure to see Vue getting some love ♥

[@fishnaldo]

I've been using both since Vue 1.0 and it (Nuxt) is always my choice for projects where I get to decide what to use. I only use React when I am forced to do so because of legacy code / project.
I think most Devs would choose Vue over React if they were making a fresh start.
The Vue docs have also always been the gold standard.

[@davidwebca]

Amazing content! Personally, since Vue 3 and the composition API, I don’t even use Pinia anymore. I simply use a reactive object returned as a composable. Then again, my use cases are pretty simple.

[@cincooitodois]

i freaking love CJ! GOAT

[@shafayet_hossain]

I am switching sides now. I love Vue 😃

[@c01nd01r]

There's an interesting nuance with use-context-selector - the component's render function will still be called, but updates in deps (for example, useEffect calls) won't occur 🙃
In any case, in my opinion, the lack of separation between initialization and render phases for user code is inconvenient. 10 points to Vue.js

[@TianYuanEX]

For state management in React, I've been using Legend-State, it's the closest you can get to DX of other frameworks like Vue and Svelte while not sacrificing performance (fine grained reactivity).

[@fdimb]

for simple stores, using shared composables is actually very intuitive and reactive by default. I could use it over Pinia for almost anything on small/simple apps

[@mathnewph]

Can't react user just import vue features ? I think it's possible

[@Xhisorz1]

amazing video. thx for the insight

[@manutechashuman]

Great insights about immutability and reactivity! Love this fair comparison.
Would this change if we used a Map instead of an Array? I feel like some of these complex updates come from using an array and could be simplified with a Map (this is a question, not a statement haha).

[@syntaxfm]

You can use a Map, but you will still need to create a copy of the Map in the state update. Also, you would need to spread the Map into an array to map over it in the render function.

[@manutechashuman]

@@syntaxfm true! -very good point!

[@jabal_team]

vue is GOAT

[@WBSummerlin]

Is there any performance improvement from using inject/provide over a pinia store?

[@syntaxfm]

I haven't done any tests myself but this stackoverflow answer says there is no noticeable difference: stackoverflow.com/a/75613361
This was my first time using provide / inject (I usually use pinia), but it is nice that I do not need to use the storeToRefs helper when using provide / inject as it injects the reactive variables directly.

[@JLarky]

How is that going to work with SSR? Won't you be sharing the same global state across all of your users?

[@syntaxfm]

createContext and useContext can only be used on the client side. In a full example you might call an API to sync the cart state for the given user on each change, or send the client side cart state to the server at checkout.
The SSR implementation would look very different.

[@salman0ansari]

react was a mistake

[@tngerik14]

I am more of a Vue user and like it a lot. Thank you for your great comparisons, it's very helpful and easy to follow.
I don't know if the Vue Dev Tools have this feature either. Your mixin solution leaves me a bit irritated because what is this line of js/ts and its weird syntax? "void this.$el.offsetWidth"

[@syntaxfm]

void evaluates the expression without any output.
Accessing the offsetWidth property makes sure the browser renders the element without the class and then renders it again with the class after it gets added. Otherwise the browser would batch the changes to classList and not show the animation if the element already had the class on it from a previous update.
developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/void