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

[wy-luke]

Met this bug, too. It's the "array selector" causing the infinite loops.

const [materials] = useGlobalStore((state) => [state.materials])

[dbritto-dev]

@wy-luke you might need useShallow to support array selectors but could be edge cases where useShallow is not enough so better to avoid array selectors and go for granular selectors

[wy-luke]

@dbritto-dev Get it. But it works fine in v4. So we should avoid using array selectors since v5?

If we want to retrieve multi states, we need to use granular selectors one by one like below, right?

const foo = useAppSelector(state => state.foo);
const bar = useAppSelector(state => state.bar);
const foo2 = useAppSelector(state => state.foo2);
const bar2 = useAppSelector(state => state.bar2);

[dbritto-dev]

@wy-luke v4 just hide the error but v5 show it

[wy-luke]

@dbritto-dev Thank you!