0

I am trying to change boolean state by pressing one of two buttons (from props). The first button triggers handlePermission1 which changes the boolean state to true and the second button triggers handlePermission2 which changes the boolean to false. This is main code of the function:

//Variable from Step5 
const [permission, setPermission] = useState(true)

function handlePermission1() {
        setPermission(true);
        setStep(step+1);
        console.log(permission);
    };

    function handlePermission2() {
        setPermission(false);        
        setStep(step+1);
        console.log(permission);
    };

//Some code...

//...
} if (step===5){
        ecraStep=<DefinePermission
                onPress1={handlePermission1}
                onPress2={handlePermission2}/>
    }
//...

However, whenever I try to change state, I need to press one of the buttons TWO TIMES instead of one.

For example, since my initial state is true, I want to change it to false so I press the button which triggers handlePermission2. The console.log exports this:

//The first value
true
//The second value
false

And if I change the initial state to false and do the same with the other button, the console.log exports:

//The first value
false
//The second value
true

I would really like to know why this is happening and how should I change the code in order to change the boolean state by pressing a button only once.

Tiago
  • 121
  • 2
  • 9
  • 3
    Already answered here- https://stackoverflow.com/questions/54069253/usestate-set-method-not-reflecting-change-immediately – Risul Islam Sep 04 '20 at 08:42
  • Just `useEffect` as in answer from above comment – Rostyslav Sep 04 '20 at 08:48
  • But I can't useEffect inside a function like handlePermission1, how do I do that? – Tiago Sep 04 '20 at 08:50
  • Duplicate. TL;DR react state updates are batch processed and occur asynchronously *between* render cycles, so console logging state right after a state update has ben enqueued will log the state from the *current* render cycle, not the *next* state for the *next* render cycle. – Drew Reese Sep 04 '20 at 08:56
  • Sir, thank you for answering but I am a bit new to React. Could you show me how to duplicate? – Tiago Sep 04 '20 at 09:01
  • what this means is never log a state immediately after setting it. it is asynchronous so it doesn't reflect immediately. if you want to check if it is updated correctly then console log in useEffect by passing 'permission' as a parameter to useEffect – Glitch_Znab Sep 04 '20 at 09:23
  • 1
    Thanks @Glitch_Znab, yes. To OP, there seems to also be some confusion about where the effect hook would go; just put it in the functional component body (not in any internal component functions) with a dependency on the state you want to log: `useEffect(() => console.log(permission), [permission]);`. This will log `permission` as a side-***effect*** (*hint hint*) any time it updates. – Drew Reese Sep 04 '20 at 15:33
  • Alright, thank you! – Tiago Sep 04 '20 at 19:41

0 Answers0