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: 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 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: Correction: 10:38 flushSync from react-dom can be used for this as an alternative to setTimeout ------------------------------------------------------------------------------ Hit us up on Socials! Brought to you by Sentry - Use code “tastytreats“ to get 2 months free - #javascript #react #vuejs