Component holding on to old state?

Question

I have a custom modal with custom buttons as props.

const [selection,setSelection] = useState(null)

    const onSelect = (item) => {
      setSelection(item);
   
      Gui.PickOption({
          message: 'choose an action',
          buttons: BUTTONS,
          onPress,
      });
    }; 
BUTTONS = [{buttonText:'print selection', onPress:()=> console.log(selection)}]

the issue here is that when the user presses the button, the log will be NULL because it seems that the modal has the state before the "selection" was updated. why doesn't it updated? how to make BUTTONS keep up with state changes? ( keep in mind the code above is a small example for an issue I am currently facing) , essentially I want the onPress to always perform set "tasks" with the most "current" state. )

Pooya Haratian · Answer 1 · 2020-09-16T05:42:31.027

The problem is you used selection value, right after setState. I guess you can use a useEffect which listens to selection value and perform your logics there like:

const [selection, setSelection] = useState(null);
const onSelect = (item) => {
    setSelection(item);
};
useEffect(() => {
    Gui.PickOption({
        message: "choose an action",
        buttons: BUTTONS,
        onPress,
    });
}, [selection]);

When you set some state (here setSelections), your component re-renders with the new value, but in onSelect button's function you still running with the old value (until the next use, which is the next render).

Component holding on to old state?

1 Answers1