Uncaught Error: Maximum update depth exceeded (implementing Tic Tac Toe Example from the docs)

[venkatmidhunmareedu]

Hello,

I am new to zustand. I was trying out the Tic Tac Toe implementation from the docs. I just copy pasted the useGameStore function from the docs page : https://zustand.docs.pmnd.rs/guides/tutorial-tic-tac-toe#lifting-state-up
and i got this Error:

The actual code i have written for your reference:

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,
        }))
      },
    }
  }),
)

function App() {
  const [squares, setSquares] = useGameStore((state) => [
    state.squares,
    state.setSquares,
  ])
  return (
    <>
      <div className='flex justify-center items-center h-[100vh] w-[100vw]'>
        <div className=''>
          <h1 className='text-4xl text-center'>Tic Tac Toe</h1>
          <br />
          <div className='grid grid-cols-3 h-[300px] w-[300px] border border-solid'>
          </div>
        </div>
      </div>
    </>
  )
}

export default App 

My dependencies:

  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "zustand": "^5.0.1"
  },

Please help. I am new to state management and a newbie trying to learn

[dbritto-dev]

@venkatmidhunmareedu my bad I need to update the tutorial to be compatible with v4 and v5, but in a nutshell we need stable selector results, we have two options:

this one

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

or this one using useShallow

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

on v4 and v5 no stable selector results could cause performance issues, on v4 that is not optimized and could hide some issues but does not mean that does not happen on v4, on v5 that is more visible

[venkatmidhunmareedu]

Hey @dbritto-dev , Thanks for helping out.
The first one

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

worked out for me. As for the second one, Their are two types of useShallow i can find.
First one:

import { useShallow } from 'zustand/shallow'

Second one:

import { useShallow } from 'zustand/react/shallow'

Both of them worked for me. But why two?
Also VS code doesn't give any auto completion like this:

But once you manually type any of above two import statements, it recognizes:

As for the discussion #2204, it is said that this would be resolved in version 5.

[dbritto-dev]

@venkatmidhunmareedu interesting I'll look into that