Dynamic Import in Javascript and inside ReactJsx . Lazy and Suspense in React. Code Splitting.
In this video we are going to discuss the Dynamic Import in Javascript . We will see that there is problem associated with Static import which increases the bundle size of project . In order to resolve this issue we use the Dynamic imports in Javascript .
Also we will see that dynamic import is not different in Reactjs . We use the similar syntax of Dynamic import of js in Reactjs . But if we use Dynamic import in the jsx of a React component then, we need to handle this thing very carefully here as the Dynamic import syntax returns Promise and if we try to render promise inside jsx then the react doesn't know how to show promises in Jsx which throws error .
So,we will see how to handle Dynamic import inside the Reactjsx.
Also, we will see How to use React lazy method to solve this issue and what is the purpose of Suspense component in React.
Also , we will see little bit glimpse of code splitting . But we will cover this topic in some another video.
Also in this video we are not covering the need of ES Modules . We are just seeing what issue just Dynamic import resolves . So if you want to see what issue did ES Modules resolve then i am sharing the Youtube link of some other creator. Also if you want to see the Advance things related to ES Modules then i will share the youtube link of that video also of some other creator . And if you want to see the Real world use cases of Dynamic Imports then i will provide you the youtube link of that video of some other creator as in this video i haven't tell you the real world use case of Dynamic import . I have just shown you the dummy example to use the Dynamic Import.
Important Youtube Links of Other Youtube Creators:-
What problem does ES Modules solve:- • Import and Export in JavaScript | ES6 Modu...
Advance knowledge of ES Modules :- • JavaScript Modules Crash Course
Real World use case of Dynamic Import:- • Learn Dynamic Module Imports In 11 Minutes
00:00 - Introduction
00:30 - Problem with Static Import
03:00 - Solution using Dynamic Import
08:00 - Dynamic Import in Reactjsx
10:00 - Checking
On this page of the site you can watch the video online Dynamic Import in Javascript and inside ReactJsx . Lazy and Suspense in React. Code Splitting. with a duration of hours minute second in good quality, which was uploaded by the user Tushar Chawla 31 January 2026, share the link with friends and acquaintances, this video has already been watched 26 times on youtube and it was liked by 2 viewers. Enjoy your viewing!
