Can't update state in event callback?

Question

React

the isActive state is not updated when handleClick is called.

const [isActive, setIsActive] = useState(false);
const [isDisabled, setIsDisabled] = useState(props.disabled);
const switchEl = useRef();

useEffect(() => {
  setIsDisabled(props.disabled);
  if (isDisabled) {
     switchEl.current.removeEventListener('click', handleClick);
  } else {
     switchEl.current.addEventListener('click', handleClick);
  }

  return () => switchEl.current.addEventListener('click', handleClick);
}, [props.disabled])

const handleClick = (event) => {
  event.stopPropagation();
  setIsActive(!isActive);
  props.onChange(!isActive);
  console.log('on click');
};

isActive is still unchanged after calling handleClick again. it is always false.

Answer 1

Simplification example:

const Example = ({ disabled, onChange }) => {
  const [isActive, setIsActive] = useState(false);

  const handleClick = useCallback((e) => {
    e.stopPropagation();
    if (disabled) return;
    setIsActive(!isActive);
    onChange(!isActive);
  }, [isActive, disabled]);

  return <Switch onClick={handleClick} />;
};