Vue vs React - Component Hierarchy and Real-time Data

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.

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

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
18:57 Chart.js Component Libraries
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!

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

Correction:

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