useCallback 和 React.memo 访问状态

Question

I have a functional component Board and within the return JSX I go over a 2D array and print bunch of Squares and I pass a handler plus some additional info into each of them. I wanted to prevent them from rerendering if the Square receives the same props so the Square component is within the React.memo() method. In the Board component where I handle the updates of the board I have the handler with useCallback so I don't pass a brand new function during rerenders.

What I don't get is that in the body of the clickHandler I have access always to the fresh updated 2D array called to board, yet I never receive the changed player, it always stays at 1. Yet, the state itself is toggled to 2 and vice versa. If I pass player as the dependency, all of my 300+ squares are obvs rerendered.

I am not passing the state as a prop to the Square, I just map over the board and pass values from the board itself.

So my question is, why I have access to the updated board in the clickHandler, but not the player. As when I click one of my squares it gets always taken by player1 which is the default.

Link to the whole repo (it is just few components) : https://github.com/TreblaCodes/react-connect5

Thanks

    const [player, setPlayer] = useContext(PlayerContext)
    const [board, setBoard] = useContext(PositionsContext)

    const clickHandler = useCallback((x,y) => {
        let board_copy = [...board]
        board_copy[y][x] = player;
        setBoard(board_copy) 
        console.log(board) //updated
        setPlayer(player === 1 ? 2 : 1)
        console.log(player) // stays at 1
    },[])

Answer 1

Just try to pass player and board into the second parameter of useCallback. Then whenever player or board gets changed you'll get new instance of callback.

Like this:

const [player, setPlayer] = useContext(PlayerContext)
const [board, setBoard] = useContext(PositionsContext)

const clickHandler = useCallback((x,y) => {
    let board_copy = [...board]
    board_copy[y][x] = player;
    setBoard(board_copy) 
    console.log(board) //updated
    setPlayer(player === 1 ? 2 : 1)
    console.log(player) // stays at 1
},[player, board])