I'm sitting down to visualize the quick sort algorithm with React.js for university. After a bit of searching, I found this code for partitioning, which is also intended for React.

async function partition(arr, start, end) {
        // Taking the last element as the pivot
        const pivotValue = arr[end];
        let pivotIndex = start;

        await changeColorForPivot(end)


        for (let i = start; i < end; i++) {
            if (arr[i] < pivotValue) {
                // Swapping elements
                [arr[i], arr[pivotIndex]] = [arr[pivotIndex], arr[i]];
                // Moving to next element
                pivotIndex++;
            }
        }

        // Putting the pivot value in the middle
        [arr[pivotIndex], arr[end]] = [arr[end], arr[pivotIndex]]

        await changeColorForPivot(pivotIndex)

        return pivotIndex;
    }

My array that I want to sort is in a state variable so that I can react to a change for display it visually.

const [arrForVisualisation, setArrForVisualisation] = useState([])

My question now is what exactly these two lines do in the Partition function

// Swapping elements
[arr[i], arr[pivotIndex]] = [arr[pivotIndex], arr[i]];

// Putting the pivot value in the middle
[arr[pivotIndex], arr[end]] = [arr[end], arr[pivotIndex]]

To me it seems like these two lines of code manipulate the state variable, as if they also update/change it at the same time. To my knowledge, I always thought that you can update/change a state variable only with the corresponding setState() function.

For my further proceeding it would help me very much to understand these two lines of code, since I must still adapt the function somewhat, in order to be able to visualize the happening changes accordingly.