Code Refactoring in React, Node.js, Express, MongoDB | MERN Stack Project

Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmap

Code refactoring in React, Node.js, Express, MongoDB, and Redux with RTK Query is one of the final steps for completing our MERN Stack Project. We will refactor and optimize both our backend and frontend code in this full stack tutorial.

💖 Support me on Patreon ➜   / davegray  

⭐ Become a full-stack web dev with Zero To Mastery Courses:
Advanced React & Redux: https://bit.ly/AdvReactDev
The Complete Node.js Developer: https://bit.ly/CompleteNodeJS
Jr to Senior Web Dev Roadmap: https://bit.ly/WebDevRoadmap-JrtoSr

🚩 Subscribe ➜ https://bit.ly/3nGHmNn

📬 Course Updates ➜ https://courses.davegray.codes/

🚀 Discord ➜   / discord  

☕ Buy Me A Coffee ➜ https://www.buymeacoffee.com/davegray

👇 Follow Me On Social Media:
Github: https://github.com/gitdagray
Twitter:   / yesdavidgray  
LinkedIn:   / davidagray  

🔗 All Resources for this MERN Stack Project: https://github.com/gitdagray/mern_sta...

🔗 Playlist for this MERN Stack Project Series: https://bit.ly/3Sn4EaI

Code Refactoring in React, Node.js, Express, MongoDB | MERN Stack Project

(00:00) Intro
(00:12) Welcome
(00:22) Starter Code - Backend
(00:51) Not a traditional code review
(01:54) Unique data field vs checking for duplicates
(04:53) Checking for case-sensitive data
(09:04) Using the default user roles value
(12:12) On not using findOneAndUpdate, etc.
(13:51) Replacing express-async-handler
(17:14) Additional error flag in handler
(18:37) Starter Code - Frontend
(18:50) validateStatus query property
(21:42) prefetch vs initiate
(24:40) Adding react-spinner dependency
(25:17) Note component refactor
(28:07) User component refactor
(29:12) EditUser component refactor
(30:30) NewNote component refactor
(31:44) EditNote component refactor
(35:54) Checking changes and network requests
(39:14) Checking optimizations in Redux Devtools
(42:23) Replace loading messages with spinners
(43:25) useTitle hook for page titles

📚 Suggested Pre-requisites for this MERN course:
🔗 Node.js for Beginners full course:    • Node.js Full Course for Beginners | C...  
🔗 React JS for Beginners full course:    • React JS Full Course for Beginners | ...  
🔗 Redux Toolkit for Beginners full course:    • React Redux Full Course for Beginners...  
🔗 React Login Playlist:    • React Login, Registration, and Authen...  

📚 Tutorial References:
🔗 Mongoose / MongoDB collation: https://www.mongodb.com/docs/manual/r...
🔗 express-async-errors: https://www.npmjs.com/package/express...
🔗 react-spinners: https://www.npmjs.com/package/react-s...
🔗 React.memo: https://reactjs.org/docs/react-api.ht...
🔗 RTK Query - Prefetching with React Hooks: https://redux-toolkit.js.org/rtk-quer...
🔗 RTK Query - Selecting data from a query result: https://redux-toolkit.js.org/rtk-quer...

Was this tutorial on Refactoring React & Node.js for our MERN Stack Project helpful? If so, please share. Let me know your thoughts in the comments.

#code #refactoring #react