React useState not working correctly in function

Question

when i set state inside function it does not works correctly. i set my state to opposite but it's not change on second console. but console 3 true.

Why it does not return true on second console?

const [checked, setChecked] = useState<any>(false);

function handleSwitchChange() {
    console.log('1. console', checked) ======> return false
    setChecked(!checked);
    console.log("2. console", checked) ======> return false
  }
  console.log("3. console", checked) =====> return true

  <SwitchButton checked={checked} onChange={handleSwitchChange} />

setState is asynchronous, if you log just after using it you'll have the old value logged — drub4n, Apr 11 '21 at 08:51

score 1 · Accepted Answer · answered Apr 11 '21 at 08:59

useState hook is linked with its related setState hook. This hook is called asynchronously. It means you can't get the changes immediately after this hook is called. There may be many many other functions being called behind the curtain. Henceforth, you are not immediately getting the updated value. in order to check its changes properly you may use the useEffect hook that will be trigger whenever the trigger parameter is updated.

const handleSwitchChange = () => {
   setChecked(!checked);
 };
useEffect(() => {
   console.log(checked);
}, [checked]);

React useState not working correctly in function

1 Answers1