Merge sort not working as expected react state array

Question

I'm working on a sorting visualizer, I've been debugging this for hours. I'm trying to sort an array that is stored in the state.

I've setup a codesandbox here: https://codesandbox.io/s/pensive-villani-kdh17?file=/src/SortingVisualizer/SortingVisualizer.jsx

Can someone show me where I'm going wrong?

  mergeSort = async () => {
    const { array } = this.state;
    const arry = array.slice();
    const auxArray = arry.slice();
    await this.mergeSortHelper(arry, auxArray, 0, arry.length - 1);
  };

  mergeSortHelper = async (arry, auxArray, start, end) => {
    if (start === end) {
      return;
    }
    const middle = Math.floor((start + end) / 2);
    await this.mergeSortHelper(arry, auxArray, start, middle);
    await this.mergeSortHelper(arry, auxArray, middle + 1, end);
    await this.doMerge(arry, auxArray, start, middle, end);
  };

  doMerge = async (arry, auxArray, start, middle, end) => {
    let a = start; //arry start
    let b = start; //auxArray start
    let c = middle + 1; //mid start

    while (b <= middle && c <= end) {
      if (arry[b].height <= arry[c].height) {
        arry[a] = auxArray[b];
        this.setState({ array: arry });
        await sleep(ANIMATION_SPEED_MS);
        a++;
        b++;
      } else {
        arry[a] = auxArray[c];
        this.setState({ array: arry });
        await sleep(ANIMATION_SPEED_MS);
        a++;
        c++;
      }
    }

    while (b <= middle) {
      arry[a] = auxArray[b];
      this.setState({ array: arry });
      await sleep(ANIMATION_SPEED_MS);
      a++;
      b++;
    }

    while (c <= end) {
      arry[a] = auxArray[c];
      this.setState({ array: arry });
      await sleep(ANIMATION_SPEED_MS);
      a++;
      c++;
    }
    auxArray = arry.slice();
  };

I may be wrong, but I asked a similar question yesterday: https://stackoverflow.com/questions/65689646/reversing-an-array-stored-in-state-doesnt-force-re-render-of-component-in-react — yahms23, Jan 13 '21 at 09:13
No, I'm having no problem re-rendering my array with new data — Sujio, Jan 13 '21 at 09:18

score 1 · Answer 1 · answered Jan 13 '21 at 09:16

1

I think you don't need all those complecated functions, just add these to function to your code and use them:


  increasingSort = (inputArray) => inputArray.sort((a, b) => a.height - b.height)

  decreasingSort = (inputArray) => inputArray.sort((a, b) => b.height - a.height);

check this: https://codesandbox.io/s/pedantic-architecture-vc4ox

answered Jan 13 '21 at 09:16

Taghi Khavari

6,272
3
15
32

I'm trying to make a visualizer for the actual sorting – Sujio Jan 13 '21 at 09:20
yes, how would I show the actual sorting steps? did you look at my demo? – Sujio Jan 13 '21 at 09:23
what do you mean by `actual sorting steps`? yes I've just added the two functions above and showed you in the link above that how you could use it. did you see the demo that it works and data is sorted? – Taghi Khavari Jan 13 '21 at 09:25
a SORTING VISUALIZER, it would show the steps of the merge sort on a random array to a sorted array. I'm aware I can just use library functions automatically get a sorted array. – Sujio Jan 13 '21 at 09:28
@Sujio I'm not getting your point. have a good day – Taghi Khavari Jan 13 '21 at 09:33
you could just click 2 buttons (link + mergesort) and get the general idea, but thanks you too – Sujio Jan 13 '21 at 09:36

score 0 · Answer 2 · answered Jan 14 '21 at 03:02

0

The bug was that the auxArray and arry was different after changing it and recursive calling.

answered Jan 14 '21 at 03:02

Sujio

357
1
2
13

Merge sort not working as expected react state array

2 Answers2