useEffect don't update when setState runs on Child Component

I’m making a tic-tac-toe game with react, and I passed the parent setState function, to change the board, to the child component.

After that, I put a useEffect in the Parent Component ( useEffect(()=> ... , [board]) ) to do an action whenever this state changes. But it doesn’t do anything when I use the setState inside the child. The console.log below is displaying true, and that is probably the reason the useEffect is no updating.

function handleClick(_, i:number) {

    setBoard(prevBoard => {
  
      const newBoard = board

      newBoard[i] = dictIconToValue[icon] as typeof prevBoard[0]
  
      console.log(newBoard == prevBoard)
  
      return newBoard
  
    })

...

}

>Solution :

The console.log below is displaying true, and that is probably the reason the useEffect is no updating.

That’s exactly it. State in react is intended to be immutable. When you call setBoard, react will compare the old state with the new state using an Object.is check (which is similar to ===). If they’re the same, then it looks like nothing changed, and so react skips the rerender. React will not check the properties inside your state to see if they changed, since that could be expensive.

Instead, make sure you create a new state instead of modifying the old one:

setBoard(prevBoard => {
  const newBoard = [...board]; // <--- creating a shallow copy
  newBoard[i] = dictIconToValue[icon] as typeof prevBoard[0]
  return newBoard
})

Leave a Reply