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

Learn how to lazy load code in React with this code splitting tutorial. Why load the code for an admin dashboard if your user is not an admin? With React.lazy, you can use code splitting to increase the performance of your React app.

Become a full-stack web dev with Zero To Mastery Courses:
- Advanced React: https://bit.ly/AdvReactDev
- The Complete Web Developer: https://bit.ly/WebDevMaster
- Junior to Senior Dev Roadmap: https://bit.ly/WebDevRoadmap-JrtoSr

Subscribe https://bit.ly/3nGHmNn

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

Questions - Please post them to my 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/

Source Code: https://github.com/gitdagray/react-lazy

React Lazy Load Code | React Code Splitting Tutorial

(00:00) Intro
(00:11) Welcome
(00:33) Starter Code
(00:48) Example App Overview
(02:43) React Router App structure
(04:30) Applying React lazy
(05:52) React lazy requirements
(06:35) Applying React Suspense
(07:27) Applying an Error Boundary
(12:11) Check component loading in dev mode
(14:05) Deployment Performance

Suggested Videos:
React Suspense & Error Boundaries: https://youtu.be/1_dLaSjzOMY
Skeleton Loading Components: https://youtu.be/cNQTg920Nx0

Tutorial References:
React Docs - lazy: https://beta.reactjs.org/reference/react/lazy
react-error-boundary: https://www.npmjs.com/package/react-error-boundary

Was this React Lazy Load & Code Splitting tutorial helpful? If so, please share. Let me know your thoughts in the comments.

#react #lazy #load