Rendering every iteration of an array sort in React - reactjs

Question

I'm trying to build a simple app in react that takes an unsorted array (this.state.dataset) then insertion sorts it and renders each iteration of the sorting process.
Because React is asynchronous placing a setstate after each array change does not work. Any ideas how to get around this?
I was able to do this with bubble sort by simply exiting the function after each array change then rendering it, then restarting the bubble sort with the updated array. However I can't get that approach to work here. Very inefficient I know, sorry I am new to this..
render() {
return (
<div className="buttons">
<button onClick={this.sort}>Insertion Sort</button>
</div>
);
}
sort(e) {
this.myInterval = setInterval(() => {
let arr = this.insertionSort();
this.setState({
dataset: arr,
});
}
}, 1000);
insertionSort(e) {
let inputArr = this.state.dataset
let length = inputArr.length;
for (let i = 1; i < length; i++) {
let key = inputArr[i];
let j = i - 1;
while (j >= 0 && inputArr[j] > key) {
inputArr[j + 1] = inputArr[j];
j = j - 1;
return inputArr //Added by me to stop loop and render (probably wrong solution)
}
inputArr[j + 1] = key;
return inputArr //Added by me to stop loop and render (probably wrong solution)
}
return inputArr;
};
(I have the this.state.dataset rendering in my render() method but excluded for brevity's sake

Answer 1

One possible solution may be to store the values required for iterating the array in the state. On each modification, you can update the state and return from the sorting function.
Because React is asynchronous placing a setState after each array change does not work. Any ideas how to get around this?
The setState function takes a second callback parameter that is called when the state updates. This means you can effectively treat state updates as synchronous.
Here is working implementation using this method:
(This is written in React Native but the logic is the same for regular React)
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
i: 1,
j: 0,
data: [...initialData],
};
}
render() {
return (
<View style={styles.container}>
<FlatList
data={this.state.data}
renderItem={({ item }) => <Text>{item}</Text>}
/>
<Button title="Sort" onPress={this.sort} />
<Button title="Reset" onPress={this.reset} />
</View>
);
}
sort = () => {
const { i, j, key, data: oldData } = this.state;
const nextSort = () => setTimeout(this.sort, 500);
if (i == oldData.length) {
return;
}
const data = [...oldData];
const value = key ? key : data[i];
if (j >= 0 && data[j] > value) {
data[j + 1] = data[j];
this.setState({ j: j - 1, data, key: value }, nextSort);
return;
}
data[j + 1] = value;
this.setState({ i: i + 1, j: i, data, key: undefined }, nextSort);
};
reset = () => this.setState({ data: [...initialData], i: 1, j: 0, key: undefined });
}
One final thing worth mentioning in your existing implementation is the mutation of state. When you have an array in your state, you cannot modify the array as this will cause issues when you call setState.
For example, your variable dataSet is stored in the state. You then set inputArr to a reference of the state value dataSet with:
let inputArr = this.state.dataset
When you now call inputArr[j + 1] = inputArr[j]; the original array (in your state) is updated. If you call setState with inputArr React will compare it against dataSet. As you have modified dataSet the values will match inputArr which means the state won't update.
You can see a workaround for this issue in my solution where I copy the dataSet into a new array with:
const data = [...oldData]
This will prevent the array in your state from updating.