2020-11-11
1624
#react
Glad Chinda
74
Nov 11, 2020 â‹… 5 min read

Lazy loading React components

Glad Chinda Full-stack web developer learning new hacks one day at a time. Web technology enthusiast. Hacking stuffs @theflutterwave.

Recent posts:

Implementing React Islands In Static Web Applications

Implementing React Islands in static web applications

React Islands integrates React into legacy codebases, enabling modernization without requiring a complete rewrite.

Nelson Michael
Jan 28, 2025 â‹… 4 min read

Onlook: A React visual editor

Onlook bridges design and development, integrating design tools into IDEs for seamless collaboration and faster workflows.

Jude Miracle
Jan 27, 2025 â‹… 8 min read
A Comprehensive Guide To JavaScript Generators

A comprehensive guide to JavaScript generators

JavaScript generators offer a powerful and often overlooked way to handle asynchronous operations, manage state, and process data streams.

Fimber Elemuwa
Jan 24, 2025 â‹… 8 min read
​​Solving Micro-Frontend Challenges With Module Federation

​​Solving micro-frontend challenges with Module Federation

webpack’s Module Federation allows you to easily share code and dependencies between applications, helpful in micro-frontend architecture.

Peter Aideloje
Jan 23, 2025 â‹… 7 min read
View all posts

6 Replies to "Lazy loading React components"

  1. Hey! Thanks for your post!

    Using lazy routes, after updating the app, if you do not refresh the app on the browser, it will try to load an old version of the bundle. so error “Uncaught SyntaxError: Unexpected token <” come up. How do you prevent that?

  2. Hello @Devin, sorry this response is coming really late. I didn’t receive any notification for this comment.

    There isn’t any particular reason for using @reach router here. In fact using react-router will also work just fine. I think the React documentation even uses react-router in their route-based code splitting examples.

    I hope you find this answer helpful.

  3. Hey, thanks for your feedback. I know this response is coming quite late but I still hope you could find it useful.

    You could setup live reload using maybe webpack-dev-server or any other tooling that fits into your project setup. That way, the browser tab automatically refreshes when files change, without you having to manually do that.

  4. Hey Mate, #GladChinda,

    Very well written article. I was searching for dynamically loaded react components & came across this page. It covers both React Lazy & Loadable part. Thank you so much.

Leave a Reply