title: Stop function while running in React
body: <h2>Introduction</h2>
  
  <p>I am building a sorting algorithms visualizer for studying purposes, and i have a <code>sortArray()</code> function that takes care of animating the array being sorted. As you can see in the code.</p>
  
  <p>and it works fine, but the problem is that i wanted to give the array takes some time to get sorted, and i wanted a way to stop this function while running.</p>
  
  <h2>What I've Tried So Far</h2>
  
  <p>After i realised that i had this problem, i thought that a "Stop" button would be a good way to solve my problem i added a new state called "Abort", and the original idea was that while the <code>sortArray()</code> function is running, the function would check everytime if the abort state is set to true, and if it is, the function would stop. and of course, it didn't work.</p>
  
  <p>after that my previous attempt had failed, i deleted the "abort" state from the code and transformed it into a normal variable, thinking that the problem maybe was related to the <code>setState</code> function being async, and it didn't work either.</p>
  
  <p>after that i did some research, but i didn't found anything useful.</p>
  
  <h2>The Code:</h2>
  
  <pre><code>resetArray(){
          const arrayToSort = [];
          const prevChanged = [];
          for (let i = 0; i &lt; this.state.numberOfItems; i++) {
              arrayToSort.push(this.RandomIntBetweenRange(5, 1000));
          }
          this.setState({ arrayToSort, prevChanged, abort: false });
      }
  
  generateNewArray(){
      this.setState({abort: true},{
          this.resetArray();
      });
  }
  
  async SortArray(algo){
      let sortedArrayAnim = algo(this.state.arrayToSort);
      let arrayToSort = this.state.arrayToSort;
      let prevChanged = this.state.prevChanged;
  
      for (let index = 0; index &lt; sortedArrayAnim.length; index++) {
          const [i,j] = sortedArrayAnim[index];
  
          if(this.state.abort){
              console.log(abort);
              return null;
          }
              let temp = arrayToSort[i];
              arrayToSort[i] = arrayToSort[j];
              arrayToSort[j] = temp;
  
              prevChanged.push(i,j);
  
              if(index == sortedArrayAnim.length - 1){
                  prevChanged.push(arrayToSort.length + 1, arrayToSort.length + 1);
                  this.setState({prevChanged});
              }
  
              this.setState({ arrayToSort,prevChanged });
              await sleep(10);
      }
  }
  
  render() {
      const {arrayToSort} = this.state;
      return (
          &lt;div className="main-div"&gt;
              {arrayToSort.map((value, idx) =&gt; (
                  &lt;div className="array-item" key={idx} style={{height: value, width: 800 / this.state.numberOfItems, backgroundColor: this.getColor(idx)}}&gt;
  
                  &lt;/div&gt;
              ))}
  
              &lt;button onClick={() =&gt; this.generateNewArray()}&gt;Generate new array&lt;/button&gt;
              &lt;button onClick={() =&gt; this.SortArray(BubbleSort)}&gt;Bubble Sort&lt;/button&gt;
              &lt;button onClick={() =&gt; this.SortArray(InsertionSort)}&gt;Insertion Sort&lt;/button&gt;
              &lt;button onClick={() =&gt; this.SortArray(QuickSort)}&gt;Quick Sort&lt;/button&gt;
              &lt;input type="number" min="5" max="1500" onChange={(event) =&gt; this.handleOnChange(event)} defaultValue={this.state.numberOfItems}/&gt;
          &lt;/ div&gt;
      );
  }
  </code></pre>