CODEWITHSUNDEEP
javascriptreactjsdomreact-hookssettimeout
Pantis Calin
Pantis Calin

Reputation: 43

Update DOM elements when state is updated using setTimeout() React

I have the following code in React. This code uses a time expensive function that performs some coputations over a large number of data. in the begining the state is filled with an array that says no computations. When the button is pressed, I want that array of the state to be filled with waiting, and after each iteration over i is complete, the element on potition i to be 'Done'. The problem is that by using set timeout, the DOM elements are not updating untill the whole function is over. Ignore the computations in the for, they are meaningless in this example. To have an ideea the function performs polynomial fit over the given data. My problem is how can I update the Dom elements while the function is running, So i can knwow which data is done and which is computing in real time


const Component = ( {data1, data2} ) => {

  const [state, setState] = useState(Array(data1.length).fill('No Computations'))
  const timeExpensiveFunction = () => {
     // data1.length = 10
     let variable0
     let variable1
     let variable2
     let variable3

     for(let i = 0; i< data1.length; i++){
       //data1[i].length = 40 000
        for(let j = 0; j< data1[i].length; j++){
           variable1 += data1[i][j]
           variable2 += variable1*data2[i][j]**3
           variable3 += data2[i][j]**2
           variable1 += data1[i][j]*data2[i][j]
        }
     
   setTimeout(() => {
                setState(state => {
                    return[
                        ...state.slice(0,i),
                        'Done',
                        ...state.slice(i+1),
                    ]
                })
            },1000)
   }
   return([variable1,variable2,variable3,variable4])
  }

  const randomFunc = (e) => {
     setTimeout((e) => setState(Array(data1.length).fill('Waiting ...')),1000) 
     timeExpensiveFunction() //Duration depends on the number of data, it is usually higher that 10-15 seconds
  }

  return (
      <div>
        <div>
          {state.map((element) => (
             {element} //This does not update with the function setTimeout. It sets after the expensive computation is over

          ))}
       </div>
       <div>
           <button onClick = {(e) => randomFunc(e)}>press</button>
       </div>
     </div>
       

)
}

Upvotes: 0

Views: 575

Answers (1)

kie
kie

Reputation: 269

First of all, You must use useState and useEffect to set a state and re-render the DOM. You can use like below:

import { useState, useEffect } from 'react'

const Component = () => {

  const [state, setState] = useState([1,2,3,4,5,6,7,8,9,10])
  const [isPress, setPress] = useState(false); // use it to not call a method on first render 
  const timeExpensiveFunction = () => {
     // lot of work here
  }

  const randomFunc = (e) => {
     setState([10,9,8,7,6,5,4,3,2,1])
     setPress(true)
  }

  useEffect({
    if (isPress) setTimeout(() => timeExpensiveFunction(),1000)
  }, [state])

  return (
      <div>
        <div>
          {state.map((element) => (
             {element}

          ))}
       </div>
       <div>
           <button onClick = {(e) => randomFunc(e)}>press</button>
       </div>
     </div>
       

)
}

Upvotes: 1

Related Questions