React is taking way more time for execution than expected

164
February 01, 2022, at 10:10 AM

I have tried to implement drench game. I have attached my code below. The logic is correct and it shouldn't also take so much time for execution given it is a 14x14 board. But after some clicks when the state.covered covers about quarter of the board the execution is taking way long to complete.

import './App.css';
import { useState } from 'react'
function App() {
  const colors = ['aliceblue', 'tomato', 'darksalmon', 'thistle', 'olivedrab', 'steelblue']
  
  var dp = [];
  for(let i=0;i<14;i++){
    let temp = []
    for(let j=0;j<14;j++){
      temp[j] = colors[Math.floor(Math.random() * 6)]
    }
    dp.push(temp)
  }
  
  var [state, setState] = useState({
    boardColors: dp,
    covered : [{x:0,y:0}],
  })
  var changeState = (color) => {
    var prevcolor = state.boardColors[0][0]
    var q = [...state.covered]
    var append_arr = [...state.covered]
    function isnotcovered(l,m,xt){
      for(let i=0;i<xt.length;i++){
        if(xt[i].x===l && xt[i].y===m){
          return false;
        }
      }
      return true;
    }
    var temp2D = [...state.boardColors];
      while(q.length){
        let top = q.shift()
        let l = top.x;
        let m = top.y;
        if( m-1>0 && temp2D[l][m-1]===prevcolor && isnotcovered(l,m-1,append_arr)){
          q.push({x:l,y:m-1})
          append_arr.push({x:l,y:m-1})
        }
        if(l+1<14  && temp2D[l+1][m]===prevcolor && isnotcovered(l+1,m,append_arr)){
          q.push({x:l+1,y:m})
          append_arr.push({x:l+1,y:m})
        }
        if(m+1<14 && temp2D[l][m+1]===prevcolor && isnotcovered(l,m+1,append_arr)){
          q.push({x:l,y:m+1})
          append_arr.push({x:l,y:m+1})
        }
        if(l-1>0 && temp2D[l-1][m]===prevcolor && isnotcovered(l-1,m,append_arr)){
          q.push({x:l-1,y:m})
          append_arr.push({x:l-1,y:m})
        }
      }
    setState((state) => ({boardColors : temp2D, covered : [...state.covered, ...append_arr]}) )
    
    setState((state) => updateState(state))
    
    function updateState(state){
      function isnotcovered(l,m,xt){
        for(let i=0;i<xt.length;i++){
          if(xt[i].x===l && xt[i].y===m){
            return false;
          }
        }
        return true;
      }
      var temp2D = [...state.boardColors];
      for(let i=0; i<state.covered.length; i++){
        temp2D[state.covered[i].x][state.covered[i].y]=color
      }
      var q = [...state.covered]
      var append_arr = [...state.covered]
      while(q.length){
        let top = q.shift()
        let l = top.x;
        let m = top.y;
        if( m-1>0 && temp2D[l][m-1]===color && isnotcovered(l,m-1,append_arr)){
          q.push({x:l,y:m-1})
          append_arr.push({x:l,y:m-1})
        }
        if(l+1<14  && temp2D[l+1][m]===color && isnotcovered(l+1,m,append_arr)){
          q.push({x:l+1,y:m})
          append_arr.push({x:l+1,y:m})
        }
        if(m+1<14 && temp2D[l][m+1]===color && isnotcovered(l,m+1,append_arr)){
          q.push({x:l,y:m+1})
          append_arr.push({x:l,y:m+1})
        }
        if(l-1>0 && temp2D[l-1][m]===color && isnotcovered(l-1,m,append_arr)){
          q.push({x:l-1,y:m})
          append_arr.push({x:l-1,y:m})
        }
      }
      return {
        boardColors : temp2D,
        covered : [...state.covered, ...append_arr],
      }
    }
  }
  
  return (
    <>
      <Board colors2D={state.boardColors} />
      <Controls boardColors={state.boardColors} colors2D={state.boardColors} colors={colors} color='green' changeState={changeState}/>
    </>
  );
}

function Board(props){
  var boardStyle = {
    height: '280px',
    aspectRatio: '1',
    backgroundColor: 'lightgreen'
  }
  var display = props.colors2D.map((color1D, index1) => (color1D.map((color,index2) => <div key={14*index1 + index2} style={{width:'20px', aspectRatio: '1', backgroundColor: color, float: 'left'}}></div>)))
  return(
    <div style={boardStyle}>
      {display}
    </div>
  )
}
function Controls(props){
  var controlStyle = {
    height: '200px',
    width: '300px',
    backgroundColor: props.color
  }
  var handleClick = (color) => {
    props.changeState(color)
  }
  var buttons = props.colors.map((color, index) => <button key={index} onClick={() => handleClick(color)}>{color}</button>)
  
  return(
    <>
      <div style={controlStyle}>
        {buttons}
      </div>
    </>
  )
}
export default App;

replace this code in App.js and it should work fine

Rent Charter Buses Company
READ ALSO
Notification show twice on flutter

Notification show twice on flutter

I've stuckMy notification in background show twice

128
Using Stagger animation for mat-data table rows not columns

Using Stagger animation for mat-data table rows not columns

I have a mat-table and I would like to add stagger animations to its rows, the stagger works fine but instead of the effect being implemented on rows I end up with staggered columnshow do I make the rows only become staggered

113
Python RE Directories and slashes

Python RE Directories and slashes

Let's say I have a string that is a root directory that has been entered

96
findOne() in spring boot ordered by Asc

findOne() in spring boot ordered by Asc

I' am trying to use findOne() jpa query, now it's working fine with me but I want also the result extDetl to come orderd by vaccineDose

156