SolidJS•2y ago

Handling rerenders when overwriting state

I have a signal that is storing a 2d array for my 'game state'. What would be the best way to render this data without causing the components to rerender on each update. Ex.

const [state, setState] = createStore<{
  board: Array<Array<{ col: number; row: number; player: number } | null>>;
}>({
  board: [
    [{ row: 0, col: 0, player: 1 }, null, null, null, null, null],
    [null, null, null, null, null, null],
    [null, null, null, null, null, null],
    [null, null, null, null, null, null],
    [null, null, null, null, null, null],
    [null, null, null, null, null, null],
    [null, null, null, null, null, null],
  ],
});

const updateBoard = (col) => {
  setState((prev) => {
    const board = prev.board.map((column) => [...column]);
    const row = prev.board[col].indexOf(null);

    board[col][row] = {
      col,
      row,
      player: 1,
    };

    return {
      ...prev,
      board,
    };
  });
  };

const [state, setState] = createStore<{
  board: Array<Array<{ col: number; row: number; player: number } | null>>;
}>({
  board: [
    [{ row: 0, col: 0, player: 1 }, null, null, null, null, null],
    [null, null, null, null, null, null],
    [null, null, null, null, null, null],
    [null, null, null, null, null, null],
    [null, null, null, null, null, null],
    [null, null, null, null, null, null],
    [null, null, null, null, null, null],
  ],
});

const updateBoard = (col) => {
  setState((prev) => {
    const board = prev.board.map((column) => [...column]);
    const row = prev.board[col].indexOf(null);

    board[col][row] = {
      col,
      row,
      player: 1,
    };

    return {
      ...prev,
      board,
    };
  });
  };

I'm rendering each column of the board then the tokens for each columns using the <For> flow. The issue is that when I update the state, I copy the board and update the next null index and return the copy. This causes the whole board to re-render.

2 Replies

REEEEE•2y ago

use the setStore function's utilities

const row = state.board[col].indexOf(null)
setState('board', col, row, {col, row, player: 1})

const row = state.board[col].indexOf(null)
setState('board', col, row, {col, row, player: 1})

optionally use the reconcile method or use produce

setState(produce(prev => {
 const board = prev.board.map((column) => [...column]);
    const row = prev.board[col].indexOf(null);

    board[col][row] = {
      col,
      row,
      player: 1,
    };

}))

setState(produce(prev => {
 const board = prev.board.map((column) => [...column]);
    const row = prev.board[col].indexOf(null);

    board[col][row] = {
      col,
      row,
      player: 1,
    };

}))

lvl_upOP•2y ago

I think that's exactly what I was looking for. Thanks

Gaming

Programming

Handling rerenders when overwriting state