React Lazy Load Code to Load Faster | React Code Splitting Tutorial

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