Performance issue I have with the Dungeon Crawler React project

Performance issue I have with the Dungeon Crawler React project
0.0 0

#1

Hi guys,
So I’ve started to work on the Dungeon Crawler project, and I’ve noticed that the example’s performance is horrible, like every key press takes one second to move the character. When I started to work on it I figured why - since the grid is so huge it takes 400ms to render. So I want to do better, and just move the board using position style, instead of re-rendering it. But now i’m stuck since I just can’t figure out how to do it. I know about shouldComponentUpdate(), but with how I build the grid, i’m just not sure how to change the style but not to render the grid…

Any ideas/hint would be great, thanks!

Here’s some partial code:

    class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            board: this.createEmptyBoard(),
            top: 0,
            left: 0
        }
    }

    componentWillMount() {
        document.addEventListener("keydown", this.handleKeyPress, false);
    }

    handleKeyPress = (e) => {
        switch(e.keyCode) {
            case 37:
                this.setState({
                    left: this.state.left + 10
                });
                break;
            case 39:
                this.setState({
                    left: this.state.left - 10
                });
                break;
            default:
                break;
        }
    };


  render() {
    return (
      <div className="main">
          <div className="view">
          <Board board={this.state.board} top={this.state.top} left={this.state.left}/>
          </div>
      </div>
    );
  }
}

/* Board Compontent */

class Board extends Component {

    render() {
        const board = this.props.board;
        let boardJSX = [];
        for (let i = 0; i < board.length; i++){
            let tileJSX = [];
            for (let j = 0; j < board[i].length; j++){
                tileJSX.push(<div key={"tile-" + i + '-' + j} className={this.classByValue(board[i][j])}></div>);
            }
            boardJSX.push(<div key={"row-" + i} className="board-row">{tileJSX}</div>
            );
        }
        let move = {
            left: this.props.left
        };
        return (
            <div className="board" style={move}>
                {boardJSX}
            </div>
        );
    }
}