React vs Vue - Real-time Data and Component Hierarchy

In this video CJ shows how he built the same real-time stock price app with both Vue and React. He focuses on comparing how we structure component hierarchies, pass props to components and how to work with real-time data across components.

00:00 Intro
01:17 Component Hierarchy
02:05 Web Socket Architecture
03:50 Top Level init
05:18 React useEffect gotchas
06:52 Vue Lifecycle Methods
07:18 Stock Symbol Form Overview
07:36 React Stock Symbol Form
08:03 Vue Stock Symbol Form
09:16 Form Submission Logic
09:37 React Form onSubmit
10:18 Vue Form onSubmit
10:32 React Element Refs and Input Focus
11:37 Vue Element Refs and Input Focus
12:01 Web Socket Subscribe
12:28 React Stock Symbol Component
13:59 Vue Stock Symbol Component
15:31 React Web Socket Update
16:10 Vue Web Socket Update
16:23 Line Chart Component
16:45 React Line Chart / remove
17:16 Vue Line Chart / remove
17:40 React StockLineChart Component
18:32 Vue StockLineChart Component
19:40 React StockLineChart onUpdate
21:48 React eslint useEffect dependencies warning
22:23 Vue StockLineChart onUpdate
23:41 Vue chart data prop
24:14 React chart data prop
24:27 Vue StockLineChart onUpdate continued
25:03 Opinions on React Implementation
25:38 Opinions on Vue Implementation
26:01 Vue vs React Takeaways
28:34 Frontend Architecture Takeaways
29:23 Brought to you by Sentry
29:54 Thanks!

Correction:

10:38 flushSync from react-dom can be used for this as an alternative to setTimeout

------------------------------------------------------------------------------

Hit us up on Socials!

#javascript #react #vuejs

[Stoney_Eagle]

Another win for Vue hehe, I love how much simpler things are with Vue.

[oumardicko]

the more i see people using react the more i hate it. JSX is great but i feel like that's the only good thing about react, except for that i see none

[feldinho]

About the need to turn off eslint for the react's onUpdate callback, I find it a little weird:
• If you know for a fact that the color will never change, having it as a dependency wouldn't hurt since it would never be triggered;
• If the color does change because of some new requirements down the line, the component will ignore it, and you have one more thing to debug.

[tthiagolino]

Just a correction, in react to wait for DOM updates it is not necessary to use a timeout, you can use react-dom's flushSync