Sequential promise chain and promise chunking in javascript

thekhairul — Mon, 29 Dec 2025 10:25:33 +0000

While dealing with a group of promises, we usually want to run them in parallel to improve performance. Promise.all is our friend in this case. We group our promises in an array and pass it into Promise.all()

const promises = [promise1, promise2, promise3];
Promise.all(promises).then(data => {
  console.log(data); // [result1, result2, result3]
})

But sometimes, a situation may arise when we can't run the promises concurrently even if they belong to the same group. For example, if one promise depends on the result of its previous promise, we must do our async operations sequentially one by one. Let's see how.

sequential promise with for loop

If you prefer simplicity or want more control, use a for loop to create the sequence.

async function executeSequentially(promises) {
    const results = [];
    for (const promise of promises) {
        const result = await promise; // Await each promise
        results.push(result); // Collect result when promise resolves
    }
    return results;
}

const promises = [promise1, promise2, promise3];
executeSequentially(promises).then(results => {
  console.log(results); // [result1, ressult2, result3]
})

sequential promise with Array.prototype.reduce

If you like the functional approach you can use array.reduce. It is more declarative and has a built-in accumulator that gets passed to each iteration with fresh value from previous callback. So if you are in a situation where one promise depends on the result of previous promise, this pattern array.reduce may feel more intuitive.

async function executeSequentially(promises) {

  const reducer = async (prevPromise, currPromise) => {
    const prevData = await prevPromise;
    return currPromise.then(result => prevData.concat(result));
  }
  // we start with a resolved promise returning an accumulator array
  const results = await promises.reduce(reducer, Promise.resolve([]));

  return results;
}

const promises = [promise1, promise2, promise3];
executeSequentially(promises).then(results => {
  console.log(results); // [result1, ressult2, result3]
})

Promise chunking with array.reduce

So far we've dealt with one single promise at a time. We waited for the previous one to finish before starting next one. Let's try a bit different situation. Suppose we have 10 posts that we want to write into database. That database has a rate limit of 3. We want to use Promise.all to initiate all the request at once but that may cause a rate limit error. So we need to build an optimal solution that tackles both issues - use Promise.all for performance gain without causing rate limit error.

To achieve this, we will divide our 10 promises into chunks or batches of 3, then run those chunks one by one. We'll use Promise.all for each single batch.

async function executeSequentially(promiseChunks) {

  const reducer = async (prevPromiseBatch, currPromiseBatch) => {
    const prevDatas = await prevPromiseBatch;
    return Promise.all(currPromiseBatch)
      .then(result => prevDatas.concat(result));
  }

  const results = await promiseChunks.reduce(reducer, Promise.resolve([]));

  return results;
}

const promiseChunks = [[promise1, promise2, promise3],[promise4, promise5, promise6], [promise7, promise8, promise9], [promise10]];

executeSequentially(promiseChunks).then(results => {
  console.log(results); // [result1, ressult2, result3, result4, result5, result6, result7, result8, result9, result10]
})

You can use for...of loop too but I personally prefer the array.reduce method.

Dealing with stale closure in React

thekhairul — Thu, 20 Nov 2025 17:05:08 +0000

What is a closure?

In Javascript, a closure is created anytime a function is created. When a function is created, it captures the references (memory address) to the variables available in its surrounding environment (its lexical scope). If this outer function returns an inner function, and the inner function uses some of those captured variables, those variables are kept alive (they don't get cleared from memory) and are bundled with the returned inner function.

This means the returned inner function can later be executed and still access and modify those preserved variables, even though the original outer function call is long finished.

Closure captures the memory address of a variable, not its value.

// 1. Outer function that defines a variable and returns an inner function
function createCounter() {
  // 'count' is the variable in the outer function's scope (lexical scope).
  let count = 0; 

  // The inner function 'increment' is created here.
  // It CLOSES OVER (captures the memory address of) the 'count' variable.
  return function increment() {
    // The inner function accesses and modifies 'count'.
    count = count + 1;
    console.log(count);
  };
}
// 2. The outer function is called.
// It returns the inner function ('increment'), which is saved in 'counter1'.
// The execution of createCounter() is now "finished."
const counter1 = createCounter(); 
// At this point, the variable 'count' (value 0) should theoretically be gone,
// but the closure keeps it preserved and bundled with 'counter1'.
counter1(); // Output: 1
counter1(); // Output: 2
counter1(); // Output: 3

Where is closure used in React?

Pretty much everywhere. In React, every functional component is essentially a JavaScript function. When you define another function inside your component (like an event handler or a utility function), that inner function automatically creates a closure.

This closure allows the inner function to "remember" and access the variables from its parent component's scope, even when the component has finished rendering.

import React, { useState } from 'react';

// The Functional Component 'PersistentCounter'
function PersistentCounter() {

  const [count, setCount] = useState(0); 

  // 1. Define the handler function in the component body.
  // This function is the event handler.
  const handleIncrement = () => {
    // This logic accesses and modifies the 'count' state.
    // This function, 'handleIncrement', forms a CLOSURE over 'count' and 'setCount'.
    setCount(count + 1);
  };

  // 2. Return the JSX, referencing the defined handler.
  return (
    <div>
      <h3>Defined Click Handler</h3>

      <p>Current Count: **{count}**</p>

      {/* 3. Pass the function reference (handleIncrement) to the onClick prop. */}
      <button 
        onClick={handleIncrement}
      >
        Increment (Using Defined Handler)
      </button>
    </div>
  );
}

export default PersistentCounter;

Stale closure in React

A closure becomes stale or outdated when the variables (memory address) that the closure uses are changed for some reason. So the closure uses the old data from old memory address and causes bug.

For example, in the code above, if the state count changes for some reason but the component doesn't re-render and therefore handleIncrement is not re-created, then this will cause a stale closure. The setCount call inside handleIncrement will then reference an outdated count value (memory address).

This example is purely hypothetical. In reality, this never occurs: count can only be changed via setCount and when it gets changed, the component will always re-render and handleIncrement function (aka closure) will always be re-created with fresh value of count.

So when does a stale closure occur in React?

It happens when we break React’s default rendering behavior. We know that whenever any state changes, React re-runs the component function, re-creating all variables and functions within it. However, sometimes we prevent this from happening for certain functions or variables by using useCallback and useMemo. Even useEffect can sometimes lead to stale closure.

useEffect stale closure:

function useEffectStaleClosure() {
  const [count, setCount] = useState(0);

  // ⚠️ BUG: This effect only runs ONCE (when the component mounts).
  // The 'tick' function it creates CLOSES over the initial count (which is 0).
  // It will forever try to set the count from 0 to 1, then stop.
  useEffect(() => {
    const interval = setInterval(() => {
      // ❌ Stale closure here! The 'count' value used here is always 0.
      setCount(count + 1); 
    }, 1000);
    return () => clearInterval(interval);
  }, []); // Empty dependency array means this only runs once.

  return <p>Count: {count}</p>;
}

useMemo stale closure:

function useMemoStaleClosure({ propValue }) {
  const [count, setCount] = useState(0);

  // ❌ Stale Closure: This calculation function only "remembers" 
  // the initial 'count' value of 0.
  const expensiveResult = useMemo(() => {
    // This closure captures 'count' from the first render.
    return computeValue(count + propValue); 
  }, [propValue]); // Only depends on propValue, NOT 'count'

  // ... (rest of the component)
}

So, it is clear that stale closures in React most often occur with hooks like (useMemo,useCallback,useEffect) which only re-run when their dependencies change. If we forget to include certain variables in a hook’s dependency array, those variables may become stale inside the closure created by that hook.

How to handle stale closure in React?

Very simple: always include all state variables, props, or functions that are accessed within those hooks in their dependency arrays. So that whenever the states get changed, the hooks re-run and therefore create new closures with fresh values.

To make sure that you never accidentally miss an important dependency, you can use ESLint Hook Rules. This tool statically analyzes your code and will often flag missing dependencies in your arrays, which is the direct cause of a stale closure. You should always use these rules.

function useMemoFixedClosure({ propValue }) {
  const [count, setCount] = useState(0);

  // ✅ Correct Closure: The dependency array now includes 'count'.
  const expensiveResult = useMemo(() => {
    // This closure captures the LATEST 'count' value.
    return computeValue(count + propValue); 
  }, [count, propValue]); // 👈 DEPENDENCY ARRAY IS CORRECT

  // ... (rest of the component)
}

This works most of the time except when it doesn't. In some scenarios, albeit rare, recreating the function (closure) every time the data changes might not be a viable option. Especially if that function is used as a dependency of some expensive useMemo or as a prop of a React.memo(component). Recreating the function frequently to avoid stale closure may cause unnecessary rendering of child components or unnecessary recalculation of an expensive useMemo.

In this scenario, we can use the useRef hook. The idea is keeping a fresh and updated copy of the state that is used in our function (closure) inside a useRef hook.

Why useRef?

The memory address of the object returned by useRef never changes in component lifecycle. Only the current property of that object changes. So if a closure uses this useRef state, it will always point to the same memory address and therefore no stale closure.
useRef does not cause a re-render of the component when its current property changes and therefore no unnecessary re-render.

Make a copy of your original state in a useRef hook and then update this useRef every time that state changes using useEffect to make sure that the useRef always contain the fresh copy of the original state.

const [originalState] = useState("Hello");
const stateCopy = useRef(originalState);

useEffect(() => {
  stateCopy.current = originalState; // Keep ref updated
  // ... other logic
}, [originalState]);

And then use the stateCopy in your closure instead of directly using the originalState.

const [originalState] = useState("Hello");
const stateCopy = useRef(originalState);

useEffect(() => {
  stateCopy.current = originalState; // Keep the copy updated
  // with original state
}, [originalState]);

const myClosureFunction = useCallback(() => {
    console.log(stateCopy.current) // ✅ Always fresh
}, [])

Now your closure function is never re-created and it has access to the fresh state via useRef. You can safely use this myClosureFunction as a dependency of other hooks or as props of a child component.

DEV Community: thekhairul