Reactjs not rendering until for loop ends

Question

Important! This is not a problem with an async API! I have this attempt to create a bubble sort visualizer, and when I run the algorithem itself, I want the user to actually see it in action. So each time I make a swap I want the user to be able to see it happens. When the loop inside the bubbleSort runs, and updates the states Classes and Array, nothing happens, until the loop completely ends. If I put a break; in the loop, react renders when the loop stops. What is the problem? How can I fix it?

EDIT:

If you have an answer, please explain why it works, and how I shoul dimplement it in my code.

import React, { useState, useEffect } from "react";
import "./SortingVisualizer.css";
import { render } from "@testing-library/react";
const SortingVisualizer = () => {
    const [getArray, setArray] = useState([]);
    const [getClasses, setClasses] = useState([""]);
    useEffect(() => {
        resetArray(200);
    }, []);
    useEffect(() => {}, [getArray, getClasses]);

    const resetArray = size => {
        const array = [];
        const classesArray = [];
        for (let i = 0; i < size; i++) {
            array.push(randomInt(20, 800));
            classesArray.push("array-bar");
        }
        setArray(array);
        setClasses(classesArray);
    };

    const bubbleSort = delay => {
        let temp,
            array = Object.assign([], getArray),
            classes = Object.assign([], getClasses);
        for (let i = array.length; i > 0; i--) {
            for (let j = 0; j < i - 1; j++) {
                classes[j] = "array-bar compared-bar";
                classes[j + 1] = "array-bar compared-bar";
                if (array[j] > array[j + 1]) {
                    temp = array[j];
                    array[j] = array[j + 1];
                    array[j + 1] = temp;
                }
                //console.log((array.length - i) * 200 + (j + 1));
                setArray(array);
                setClasses(classes);
                break;
            }
        }
        console.log("done.");
    };
    return (
        <>
            <div className="menu">
                <button onClick={() => resetArray(200)}>Geneate new array</button>
                <button onClick={bubbleSort}>Do bubble sort</button>
            </div>
            <div className="array-container">
                {getArray.map((value, i) => (
                    <div
                        className={getClasses[i]}
                        key={i}
                        style={{ height: `${value * 0.1}vh` }}
                    ></div>
                ))}
            </div>
        </>
    );
};

function randomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}
export default SortingVisualizer;

Spidy · Accepted Answer · 2020-03-23 20:57:20Z

6

React will focus on performance whenever it can. So for example, it will aggregate a bunch of setState calls and handle them in batches to prevent unnecessary renders. Great for most web applications, not great for visualizations such as this.

What you can do is wait for a render to complete before moving on to the next state. Timers and async/await would make this pretty easy to read and complete.

// Returns a promise that resolves after given delay
const timer = (delay) => {
    return new Promise((resolve) => setTimeout(resolve, delay));
}

const bubbleSort = async(delay) => {
    let temp,
        array = Object.assign([], getArray),
        classes = Object.assign([], getClasses);
    for (let i = array.length; i > 0; i--) {
        for (let j = 0; j < i - 1; j++) {
            classes[j] = "array-bar compared-bar";
            classes[j + 1] = "array-bar compared-bar";
            if (array[j] > array[j + 1]) {
                temp = array[j];
                array[j] = array[j + 1];
                array[j + 1] = temp;
            }
            //console.log((array.length - i) * 200 + (j + 1));
            setArray(array);
            setClasses(classes);

            // Wait delay amount in ms before continuing, give browser time to render last update
            await timer(delay);
        }
    }
    console.log("done.");
};

UPDATE

The next portion of your code that needs to be changed is how you are modifying the array. When you call setArray, React looks at the value you pass in and does a shallow comparison to see if its different than the existing value. If they're the same, it ignores it and does not rerender. For primitive data types like String, Boolean, and Number this isn't a problem. For complex data types like Object, Array, and Function this is a problem as it compares the memory address, not the contents.

Your code is modifying the same array and then passing it into setArray, which in turn sees that its the same memory address that it already has and ignores the update.

So why does it still update the first two? I'm not really sure actually. Possibly the click even tells React it should re-render.

Here's how to fix this issue. Make sure you are giving setArray a new memory address each time so that it triggers a re-render. Your other option is to use a force render technique.

// Create a new array and spread the old arrays contents out inside of it.
// New memory address, same contents
setArray([...array]);

edited Mar 23, 2020 at 20:57

answered Mar 22, 2020 at 20:54

Spidy

40k15 gold badges67 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

laviRZ Over a year ago

Hi, I implemented what you suggested, but it only updated the first two bars, and then did nothing. And when I run the bubble sort twice, it is glitching like hell.

Ram Sankhavaram Over a year ago

For a functional component using useState hook, the setter if called with the same state will not trigger a re-render. However for an occasional case if the setter is called immediately it does result in two renders instead of one. so, u see the first 2 bars updating.

Spidy Over a year ago

If you post this up on a CodeSandbox.io I can help further. My guess is its a problem with your CSS logic.

laviRZ Over a year ago

@Spidy Here it is

Spidy Over a year ago

@laviRZ Thanks! I have a solution for you now

|

Ram Sankhavaram · Accepted Answer · 2020-03-22 23:11:33Z

1

setState always triggers a re render when ever there is a change in the state of the component. Incase of hooks, updating state to a value identical to the previous value doesn't cause a re render. Hence, in your case to show the changes re rendering is necessary. Here is a working demo of what you are looking for.

https://stackblitz.com/edit/react-qaawgg?file=index.js

import React, { Component } from 'react';
import { render } from 'react-dom';

class App extends Component {
  constructor() {
    super();
    this.state = {
      arr: [],
      clsarr:[]
    };
  }
timeDelay = (delay) => {
    return new Promise((resolve) => setTimeout(resolve, delay));
}

     resetArray = (size)=> {
        const array = [];
        const classesArray = [];
        for (let i = 0; i < size; i++) {
            array.push(this.randomInt(20, 800));
            classesArray.push("array-bar");
        }
        this.setState({arr:array,clsarr:classesArray});
    };

    bubbleSort = async(delay) => {
        let temp,
            array = Object.assign([], this.state.arr),
            classes = Object.assign([], this.state.clsarr);
        for (let i = array.length; i > 0; i--) {
            for (let j = 0; j < i - 1; j++) {
                classes[j] = "array-bar compared-bar";
                classes[j + 1] = "array-bar compared-bar";
                if (array[j] > array[j + 1]) {
                    temp = array[j];
                    array[j] = array[j + 1];
                    array[j + 1] = temp;
                }
                //console.log((array.length - i) * 200 + (j + 1));

                this.setState({arr:array,clsarr:classes})
                 await this.timeDelay(500);

            }
        }
        console.log("done.");
    };

    randomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

  render() {
    return (
      <div>
            <div className="menu">
                <button onClick={() => this.resetArray(50)}>Geneate new array</button>
                <button onClick={()=>this.bubbleSort()}>Do bubble sort</button>
            </div>
            <div className="array-container">
                {this.state.arr.map((value, i) => (
                    <div
                        className={this.state.clsarr[i]}
                        key={i}
                    >{value}<br/></div>
                ))}
            </div></div>
    );
  }
}

render(<App />, document.getElementById('root'));

edited Mar 22, 2020 at 23:11

answered Mar 22, 2020 at 22:26

Ram Sankhavaram

1,2388 silver badges13 bronze badges

5 Comments

Dharman Over a year ago

While this code may solve the question, including an explanation of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. Remember that you are answering the question for readers in the future, not just the person asking now. Please edit your answer to add explanations and give an indication of what limitations and assumptions apply.

laviRZ Over a year ago

This is working well, but what is the difference that made it work?

Ram Sankhavaram Over a year ago

To see the live swapping of numbers your react application should re render it. Using hooks makes optimizations to stop re rendering if the state value is identical to the previous one. Hence, you couldn't see the updates. But using state in a class component triggers a re render for every change in state. So, I have chose to implement this using a class component.

laviRZ Over a year ago

But the values aren't identical, that's why an update should occur...

laviRZ Over a year ago

So why does it think it's identical?

Ernesto · Accepted Answer · 2020-03-22 21:33:09Z

0

Maybe the fetch is async, but once it gets into the loop it becomes sync, a 64 bit runs up to 18,446,744,073,709,551,615 (264 − 1) Instructions per second not the human eye and the screen are able to see that . And yes I looked at Wikipedia to find out the number.

answered Mar 22, 2020 at 21:33

Ernesto

4,3461 gold badge17 silver badges30 bronze badges

1 Comment

laviRZ Over a year ago

But the program doesn't finish quickly, it get's stuck, or does nothing.

Collectives™ on Stack Overflow

Reactjs not rendering until for loop ends

3 Answers 3

6 Comments

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related