Problem using useState inside useCallback hook

Question

I'm having a problem where a useState hook "setSelectAll(!selectAll)" inside a useCallback function updates the value but the conditional below that sentence is using the old selectAll value, so i have to make two clicks to make it work, and I dont know why, any help wold be very aprreciated !

I have this useCallback hook that executes when I press a Button

<Button  onClick={onSelectAll}>{selectAll ? t`Deselect All` : t`Select All`}</Button>

And here's my callback,

const onSelectAll = useCallback(() => {
  setSelectAll(!selectAll);
  if(selectAll) {  
    let newItemsSelected = [...itemsSelected];
    arrayList.forEach(item => {
      newItemsSelected.push(item.id);
    })
    setItemsSelected(newItemsSelected);
    onSelectedChange(newItemsSelected);
  } else {
    setItemsSelected([]);
  }
}, [selectAll, itemsSelected]);```

Setstate is asynchronously, you can not use any action after setstate, for example console.log or some conditions... — Nijat Aliyev, Apr 10 '22 at 16:18

score 2 · Answer 1 · answered Apr 10 '22 at 16:22

To avoid having React lifecycle issues in cases like this, you'll need to set the state based off the previous state.

Like this:

setSelectAll(prevSelectAllState => !prevSelectAllState);

Here's what it would look like in your exact example:

const onSelectAll = useCallback(() => {
  setSelectAll(prevSelectAllState => !prevSelectAllState);
  if(newSelectAll) {  
    let newItemsSelected = [...itemsSelected];
    arrayList.forEach(item => {
      newItemsSelected.push(item.id);
    })
    setItemsSelected(newItemsSelected);
    onSelectedChange(newItemsSelected);
  } else {
    setItemsSelected([]);
  }
}, [selectAll, itemsSelected]);

score 0 · Answer 2 · edited Apr 10 '22 at 16:22

0

You are mutating state directly which will cause issues, You need to let react update state, like below sample

setSelectAll(prevState => !prevState)

edited Apr 10 '22 at 16:22

Barry Michael Doyle

9,333
30
83
143

answered Apr 10 '22 at 16:21

Reza

31
5

score 0 · Answer 3 · answered Apr 10 '22 at 16:23

use/setState is synchronous, so any code running directly after it will not see the result of the changed state until after the component re-renders. Instead, just simulate the change by using an altered version before the real one changes:

const onSelectAll = useCallback(() => {
  const newSelectAll = !selectAll; // <--
  setSelectAll(newSelectAll);
  if(newSelectAll) {  
    let newItemsSelected = [...itemsSelected];
    arrayList.forEach(item => {
      newItemsSelected.push(item.id);
    })
    setItemsSelected(newItemsSelected);
    onSelectedChange(newItemsSelected);
  } else {
    setItemsSelected([]);
  }
}, [selectAll, itemsSelected]);

score 0 · Accepted Answer · answered Apr 10 '22 at 16:31

You need to understand lifecycle of React component.

useEffect will be fired after state change in re-render by updated state. And useCallback function is also changed.

So you can call your callback function internally without direct call by changing your state.

const onSelectAll = useCallback(() => {
  if(selectAll) {  
    let newItemsSelected = [...itemsSelected];
    arrayList.forEach(item => {
      newItemsSelected.push(item.id);
    })
    setItemsSelected(newItemsSelected);
    onSelectedChange(newItemsSelected);
  } else {
    setItemsSelected([]);
  }
}, [selectAll, itemsSelected]);

<Button  onClick={setSelectAll(prevSelectAllState => !prevSelectAllState);}>{selectAll ? t`Deselect All` : t`Select All`}</Button>

Problem using useState inside useCallback hook

4 Answers4