Memory difference between array of callbacks with array args and array of args with looped callback

The title is a little confusing... To explain whats happening, I am creating a grid made of custom <Tile />s. For right now lets say grid[y][x] = 1 means a dark tile and grid[y][x] = 0 mean white tile. I want to create a single function that I can edit to do different things with said grid.

Examples: loop through each tile from (0,0) to (arr.length, arr[0].length), animate borders then insides, etc. I want to be able to create that animation order in a separate function.

Here's what my current code looks like:

const doStuff = (setGameboard, size /*grid is size x size square*/) => {
  // Returns a Promise that resolves after "ms" Milliseconds
  const timer = (ms) => new Promise((res) => setTimeout(res, ms));

  // Create an array of callbacks with each being a step in the gameboard animation
  const renderArr = [];

  async function renderBoard() {
    //Loops over each index of renderArr and calls the function at i-th index
    for (var i = 0; i < renderArr.length; i++) {
      renderArr[i]();
      await timer(5); // wait milliseconds
    }
  }

  const createRenderSteps = (setGameboard, size) => {
    for (var i = 0; i < size * size; i++) {
      //Get x and y based on I index
      const y = Math.floor(i / size);
      const x = i % size;

      // Add render step (keyframe) to render array
      renderArr.push(() => {
        setGameboard((gameboard) => {
          let temp = [...gameboard];
          temp[y][x] = 1;
          return temp;
        });
      });
    }
  };
  createRenderSteps(setGameboard, size);
  renderBoard();
};

module.exports.doStuff = doStuff;

To explain it simply, I am currently creating an array of callbacks that represent each "key frame" (i use the terms loosely here) of the animation. for example renderArr[0] would look like:

() => {
  setGameboard((gameboard) => {
    let temp = [...gameboard];
      temp[0][0] = 1;
      return temp;
   });

}

My question then comes down to performance.

Would it be "better" to keep this array of callbacks OR to create an array that ONLY contains gameBoards then create a for loop that calls the setGameboard function with the [i]th gameboard? *** looking something like this:

const doStuff = (initialGameboard, setGameboard, size /*grid is size x size square*/) => {
  // Returns a Promise that resolves after "ms" Milliseconds
  const timer = (ms) => new Promise((res) => setTimeout(res, ms));

  // Create an array of gameboards set first index to the initial (unchanged) gameboard
  const steps = [initialGameboard];

  async function renderBoard() {
    //Loops over each index of renderArr and calls the function at i-th index
    for (var i = 0; i < renderArr.length; i++) {
      setGameboard(steps[i]);
      await timer(5); // wait milliseconds
    }
  }

  const createRenderSteps = (setGameboard, size) => {
  
    for (var i = 0; i < size * size; i++) {
      //Get x and y based on I index
      const y = Math.floor(i / size);
      const x = i % size;

      const newGameboard = [steps[i]]
      newGameboard[y][x] = 1
      steps.push(newGameboard);
    }
  };
  createRenderSteps(setGameboard, size);
  renderBoard();
};

module.exports.doStuff = doStuff;

EDIT: MY initial thoughts were that the second option (array of gameBoards with looped function call) would be more performant in terms of memory because the array of callbacks STILL has to store a copy of the gameboard along with the rest of the function call but I don't know if that's correct or not