React update state array in useEffect hook

Question

I've read all the questions and answers about setting State on an array in React but none seem to fix my issue.

I initialise my arrays like this:

 const initialStates = {cellStatuses: () =>Array(6).fill(Array(5).fill(status.unguessed)),
} 
const [dailyCellStatuses, setDailyCellStatuses] = useLocalStorage('dailyCellStatuses', initialStates.cellStatuses)

const [cellStatuses, setCellStatuses] = useState(initialStates.cellStatuses)

and then later I use an effect to mimic componentDidMount and in that effect I check if the cellStatuses need to be updated

useEffect (() => {
    if (gameMode && playedAlreadyToday(lastPlayedDate)) {
      setBoard(dailyBoard)
      setCellStatuses(dailyCellStatuses)
      console.log(cellStatuses, 'cell statuses')
    } else {
      setBoard(initialStates.board)
    }

The console always logs the old state it never updates with the new dailyCellStatuses that I am trying to set. I have tried cloning the dailyCellStatuses [...dailyCellStatuses] I have tried calling a function in the setter I'm really stuck. Help!

Does this answer your question? ReactJS state update and immediate access — Siddharth Seth
– Siddharth Seth, Commented Jan 23, 2022 at 10:05
Thanks I don't think so. I tried it out anyway and put the console statement into a callback function and it produced this error State updates from the useState() and useReducer() Hooks don't support the second callback — Linda Keating
– Linda Keating, Commented Jan 23, 2022 at 10:17

lolmatya · Accepted Answer · 2022-01-23 10:22:46Z

1

your state is updating fine, your issue is you are console logging the value in the same render cycle,

Console log the value outside useEffect or you can do this

    if (gameMode && playedAlreadyToday(lastPlayedDate)) {
      setBoard(dailyBoard)
      setCellStatuses(dailyCellStatuses)
      console.log(dailyCellStatuses, 'cell statuses')
    } else {
      setBoard(initialStates.board)
    }

answered Jan 23, 2022 at 10:22

lolmatya

421 bronze badge

Sign up to request clarification or add additional context in comments.

3 Comments

Linda Keating Over a year ago

Yeah I thought the same. But its not so. When I console.log the new board value I see it behaving as expected. Also when I check dev tools Components state I can see that the old state is still there. I'm really stumped.

Linda Keating Over a year ago

I found my problem. I have another effect that is acting on the cellstatuses. you are correct the code above is working, but I have a side effect elsewhere undoing my setStatuses.

lolmatya Over a year ago

gotcha.........

Collectives™ on Stack Overflow

React update state array in useEffect hook

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related