The Power Of reduce() - Sequentially Queue Promises
Tags: javascript, beginners, programming, tutorial
Published: 2022-03-21 08:02:39

Yes reduce, the almighty, feared among the mortals...

But in all seriousness, a lot of new and experienced developers alike, avoid trying to understand this one, and with no good reason if you ask me.

If you don't yet understand it, I recommend [this site](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce), it has some great examples that will definitely get you started.

---

**Now that we've got that behind us, Let's talk about the true power of reduce  🔥⚡️🔥⚡️🔥**

```js
array.reduce( async (previousPromise, item) => {
  await previousPromise;

  return methodThatReturnsAPromise(item);
}, Promise.resolve());
```

**Let's break it down:**
1. First we initialize the accumulator with `Promise.resolve()` which returns a `Promise` that is resolved with the given value (the argument in passed), in our case - `undefined` but we don't care about that 'cause we only want the power of the Promise.

1. We start the loop by awaiting for the accumulator (bear with me it will make sense after the first iteration) and **after that** we are returning another promise!

1. Now, the accumulator is equal to `methodThatReturnsAPromise` with the first element of the array as its argument.

1. And now the cycle continues...we await the accumulator and then make it equal to the next promise.


Every promise will happen one after the other.
The next promise will wait for the previous promise to finish  before it executes.

A `promise` can be `fetch API call` that we want to do one by one to not overload the system.

That's it, we've harnessed the true power of `reduce`!
We are now able to sequentially queue promises 🔥


For a more detailed explanation visit [css-tricks](https://css-tricks.com/why-using-reduce-to-sequentially-resolve-promises-works/)

---

## Bonus: `reduceRight()`
It works the same way as `reduce()`. However, It works in the opposite direction. 

> `reduce()` starts at the first element and travels towards the last. Oppositely, `reduceRight()` starts at the last element and goes to the first element.

The only use case I saw for that one so far if for avoiding too many context providers from spamming your React `App.js`
(Indentation Hell)

```react
<BrowserRouter>
    <AuthProvider>
        <ThemeProvider>
            <ChatProvider>
                <App />
            </ChatProvider>
        </ThemeProvider>
    </AuthProvider>
</BrowserRouter>
```
 
![Indentation Hell](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gk3xvkkdf99iwy4c4l3e.png)

The way to solve it (in a cool way with reduce) while still keeping the same order is with `reduceRight()`.

```react
export default function Compose(props: Props) {
    const { components = [], children } = props

    return (
        <>
            {components.reduceRight((acc, Comp) => {
                return <Comp>{acc}</Comp>
            }, children)}
        </>
    )
}
```
 
And in the you can use is like so:

```react
<Compose components={[BrowserRouter, AuthProvider, ThemeProvider, ChatProvider]}>
    <App />
</Compose>
```

This is the stackoverflow [question](https://stackoverflow.com/questions/51504506/too-many-react-context-providers) that first introduced it to me. 

As always, thank you for reading! 🙏🏼🦾