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.

⭐ 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 https://discord.gg/neKghyefqh

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

Follow Me On Social Media:
Github: https://github.com/gitdagray
Twitter: https://twitter.com/yesdavidgray
LinkedIn: https://www.linkedin.com/in/davidagray/

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

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: https://youtu.be/f2EqECiTBL8
React JS for Beginners full course: https://youtu.be/RVFAyFWO4go
Redux Toolkit for Beginners full course: https://youtu.be/NqzdVN2tyvQ
React Login Playlist: https://www.youtube.com/playlist?list=PL0Zuz27SZ-6PRCpm9clX0WiBEMB70FWwd

Tutorial References:
Mongoose / MongoDB collation: https://www.mongodb.com/docs/manual/reference/collation/
express-async-errors: https://www.npmjs.com/package/express-async-errors
react-spinners: https://www.npmjs.com/package/react-spinners
React.memo: https://reactjs.org/docs/react-api.html#reactmemo
RTK Query - Prefetching with React Hooks: https://redux-toolkit.js.org/rtk-query/usage/prefetching#prefetching-with-react-hooks
RTK Query - Selecting data from a query result: https://redux-toolkit.js.org/rtk-query/usage/queries#selecting-data-from-a-query-result

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