Infinite loops

[samirhembrom]

This code is from Tutorial: Tic-Tac-Toe

import { create } from 'zustand'
import { combine } from 'zustand/middleware'

const useGameStore = create(
  combine({ squares: Array(9).fill(null) }, (set) => {
    return {
      setSquares: (nextSquares) => {
        set((state) => ({
          squares:
            typeof nextSquares === 'function'
              ? nextSquares(state.squares)
              : nextSquares,
        }))
      },
    }
  }),
)

export default function Board() {
  const [squares, setSquares] = useGameStore((state) => [
    state.squares,
    state.setSquares,
  ])

  return (
    <div
      style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(3, 1fr)',
        gridTemplateRows: 'repeat(3, 1fr)',
        width: 'calc(3 * 2.5rem)',
        height: 'calc(3 * 2.5rem)',
        border: '1px solid #999',
      }}
    >
      {squares.map((square, squareIndex) => (
        <Square key={squareIndex} value={square} />
      ))}
    </div>
  )
}

Inside board component

const [squares, setSquares] = useGameStore((state) => [
    state.squares,
    state.setSquares,
  ])

this statement is causing infinite loops.

[dai-shi]

Thanks for reporting!
Can anyone send a PR to fix it?

  const squares = useGameStore((state) => state.squares)
  const setSquares = useGameStore((state) => state.setSquares)

[samirhembrom]

Got it