---
title: "Discussion on \"Understanding Dynamic imports, Lazy and Suspense using React Hooks\" | Hashnode"
description: "Discussion on \"Understanding Dynamic imports, Lazy and Suspense using React Hooks\". An exciting journey\nIt has been an exciting journey so far with the #2articles1week challenge from HashNode. So much of learning from reading the great articles coming out of it. I believe, all the writers taking part in it, are the Real Winners.\nI a..."
url: "https://hashnode.com/posts/understanding-dynamic-imports-lazy-and-suspense-using-react-hooks/5f2937e709567e0dc187f46f"
---

[Feed](https://hashnode.com/feed) /

Discussion

# [Understanding Dynamic imports, Lazy and Suspense using React Hooks](https://blog.greenroots.info/understanding-dynamic-imports-lazy-and-suspense-using-react-hooks?utm_source=hashnode&utm_medium=feed)

An exciting journey It has been an exciting journey so far with the #2articles1week challenge from HashNode. So much of learning from reading the great articles coming out of it. I believe, all the writers taking part in it, are the Real Winners. I a...

Aug 4, 2020 · 9 min read · blog.greenroots.info  
Updated May 3, 2023  
Read the article

-   [#reactjs](https://hashnode.com/tag/reactjs)
-   [#javascript](https://hashnode.com/tag/javascript)
-   [#programming](https://hashnode.com/tag/programming)
-   [#beginner](https://hashnode.com/tag/beginner)
-   [#2articles1week](https://hashnode.com/tag/2articles1week)

## Written by

[Tapas Adhikary](https://hashnode.com/@atapas)

@atapas · Bangalore

  
[View profile](https://hashnode.com/@atapas)

Educator @tapaScript | Founder CreoWis & ReactPlay - Writer - YouTuber - Open Source

Co-Founder, @CreoWis | Teacher, @tapaScript | Founder, @ReactPlay | YouTuber | Writer | Human

## Responses 8

Markdown supported · ⌘↵ to post

[mahmoud elfeky](https://hashnode.com/@mmdelfeky)

[Jun 8, 2023](https://hashnode.com/posts/understanding-dynamic-imports-lazy-and-suspense-using-react-hooks/5f2937e709567e0dc187f46f/comment/6481ca6ddc966543c1f9fe1e)

Hello [Tapas Adhikary](https://hashnode.com/@atapas) thanks for this amazing article,

but i want to ask what if we use lazy loading in all components will it have harmful effect?

[Ole Spaarmann](https://hashnode.com/@olespaarmann)

[Dec 9, 2022](https://hashnode.com/posts/understanding-dynamic-imports-lazy-and-suspense-using-react-hooks/5f2937e709567e0dc187f46f/comment/63931aba855b6005fa6c14c3)

Hey [Tapas Adhikary](https://hashnode.com/@atapas), thanks for the great article. I think a small error prevented your example from working for me. You need to return the imported component in `importDemo`

```
const importDemo = file =>
  return lazy(() =>
    import(`./demo/${file}`)
      .catch(() => console.log('Error in importing'))
);
```

[Moinul Moin](https://hashnode.com/@moinulmoin)

[Nov 30, 2021](https://hashnode.com/posts/understanding-dynamic-imports-lazy-and-suspense-using-react-hooks/5f2937e709567e0dc187f46f/comment/61a5da8a9ac0d611876b3082)

can anyone please explain this line to me? Thanks in advance. I am confused that's why.

> Promise.all(promise).then(setSelectedDemo);

[Tapas Adhikary](https://hashnode.com/@atapas)

[Nov 30, 2021](https://hashnode.com/posts/understanding-dynamic-imports-lazy-and-suspense-using-react-hooks/5f2937e709567e0dc187f46f/comment/61a5da8a9ac0d611876b3082#reply-61a5f33e9ac0d611876b3346)

Hey [Moinul Moin](https://hashnode.com/@moinulmoin), Thanks for asking. Let me try explaining it.

When you have multiple unrelated asynchronous operations to perform, you should use the promise API method called `all()` or `allSettled()` to resolve them. You must not use the `loop` to resolve them one by one.

The method `Promise.all` executes multiple promises in parallel and returns a new promise. It waits for the execution of all the premises to complete. So, the execution time of the Promise.all method will be the same as the max time taken by an input promise.

In this example, we execute multiple promises using all() method and pass the output of execution to the `setSelectedDemo` method as an argument. The `setSelectedDemo` is a method to set the state `selectedDemo`.

What may be confusing to you is the `selectedDemo` method not taking any argument explicitly inside then(). You don't have to. Take this example,

You have three promises,

```
// It resolves with the value red after 1 second
const red = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('red');
    }, 1000);
});

// It resolves with the value green after 3 seconds
const green = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('green');
    }, 3000);
});

// It resolves with the value blue after 5 seconds
const blue = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('blue');
    }, 5000);
});
```

Now you can use Promise.all() method

```
Promise.all([red, green, blue]).then(console.log);
```

Output,

```
['red', 'green', 'blue']
```

The `Promise.all([red, green, blue]).then(console.log);` is same as,

```
Promise.all([red, green, blue])
.then(function(colors){
    console.log(colors)
});
```

I hope it clarifies. If you are interested to know more about Promises, check this out,

[blog.greenroots.info/series/javascript-promises](https://blog.greenroots.info/series/javascript-promises)

[Aditya Saxena](https://hashnode.com/@adityasaxena)

[Oct 5, 2021](https://hashnode.com/posts/understanding-dynamic-imports-lazy-and-suspense-using-react-hooks/5f2937e709567e0dc187f46f/comment/615c685e7db4a563964abc88)

Ah, there it is.

Been looking for the term opposite to lazy loading, eager loading.

Thanks!

[Tapas Adhikary](https://hashnode.com/@atapas)

[Oct 5, 2021](https://hashnode.com/posts/understanding-dynamic-imports-lazy-and-suspense-using-react-hooks/5f2937e709567e0dc187f46f/comment/615c685e7db4a563964abc88#reply-615c90ea7db4a563964ac07a)

Great, thanks [Aditya Saxena](https://hashnode.com/@adityasaxena) for letting me know, it was helpful.

[SavAnna](https://hashnode.com/@SavAnna)

[Mar 2, 2021](https://hashnode.com/posts/understanding-dynamic-imports-lazy-and-suspense-using-react-hooks/5f2937e709567e0dc187f46f/comment/603ecaaaff443a0a4499e486)

Hi, Do you have the final repo of this tutorial? And what gives Promise.all in the async function?

[Tapas Adhikary](https://hashnode.com/@atapas)

[Mar 3, 2021](https://hashnode.com/posts/understanding-dynamic-imports-lazy-and-suspense-using-react-hooks/5f2937e709567e0dc187f46f/comment/603ecaaaff443a0a4499e486#reply-603ef24dfb37920a1fc64047)

[SA](https://hashnode.com/@SavAnna), Here is the repo:

> [github.com/atapas/react-dynamic-import-component](https://github.com/atapas/react-dynamic-import-component).

Please see about the promise functions from here:

[freecodecamp.org/news/javascript-promise-tutorial…](https://www.freecodecamp.org/news/javascript-promise-tutorial-how-to-resolve-or-reject-promises-in-js/)

[Diana Hernández Soler](https://hashnode.com/@Dianait)

[Aug 17, 2020](https://hashnode.com/posts/understanding-dynamic-imports-lazy-and-suspense-using-react-hooks/5f2937e709567e0dc187f46f/comment/5f3a5878c4d5973f55c91b4d)

Loved it! So nicely explained. I wanted to do some tests with the new features like SupenseList and useTransition, although it is still unstable, cause' it seems super powerful. Have you tried it? Thanks for this, really, so helpfull.

[Tapas Adhikary](https://hashnode.com/@atapas)

[Aug 17, 2020](https://hashnode.com/posts/understanding-dynamic-imports-lazy-and-suspense-using-react-hooks/5f2937e709567e0dc187f46f/comment/5f3a5878c4d5973f55c91b4d#reply-5f3a6e170801bf3f76e609a1)

Wow, Thanks [Diana Hernández Soler](https://hashnode.com/@Dianait)! Appreciate.

> features like SupenseList and useTransition

Yes, I have read through. Want to do some more hand-on and plan an article on it.

[Bolaji Ayodeji](https://hashnode.com/@bolajiayodeji)

[Aug 5, 2020](https://hashnode.com/posts/understanding-dynamic-imports-lazy-and-suspense-using-react-hooks/5f2937e709567e0dc187f46f/comment/5f2a2b05d7d55f162b5da03b)

Really insightful article, will share this!

[Victoria Lo](https://hashnode.com/@victoria)

[Aug 4, 2020](https://hashnode.com/posts/understanding-dynamic-imports-lazy-and-suspense-using-react-hooks/5f2937e709567e0dc187f46f/comment/5f2961236face9141b78fad1)

Loved it. Bookmarked it. Will re-read over the weekend :)