if(state){useState} delay by one Event

Question

this is, what I want: I click on the div as a checkbox, and if it's clicked, the NEXT-Button should be enabled. But with if (checkboxClass === "checkbox-clicked") the update comes one click later.

I click on the check: nothings happend, I uncheck: the button is enabled.

how can i get an instand update ?

import React, { useState } from "react";

import "../css/MainPages.css";
import "../css/Request.css";

function Test() {
  const [checkboxClass, setClassName] = useState("checkbox");
  const [buttonState, setButtonState] = useState(true);

  function handleClass() {
    if (checkboxClass == "checkbox") {
      setClassName("checkbox-clicked");
    }
    checkButton();
  }

  function checkButton() {
    if (checkboxClass === "checkbox-clicked") {
      setButtonState(false);
    }
  }

  return (
    <>
      <div onClick={handleClass} className={checkboxClass} />

      <button disabled={buttonState} className="btn btn-transparent">
        Next
      </button>
    </>
  );
}
export default Test;

Answer 1

Yes, It's because setButtonState is not executed immediately. You must think, that setState is request to change the value and react by self will decides when it will be executed.

Your checkButton() method is immediately after setState, therefore when checkButton method is executes, that state is still not changed (but will change, few miliseconds later).

To solve you situation, you can use useEffect react hook, which will be listening on checkbox state change, and when state will be changed, useEffect will by automaticaly executed:

// Second parameter is, to which states will be useEffect listening
useEffect(() => { checkButton(); }, [checkboxClass])