state not updating instantly

[rocky panther]

Hi, I have a problem where I change state value with onChange in select element, and it is not recognized instantly. Here's what I mean:

export const Test = () => {
  const [selection, setSelection] = React.useState(null);

  const handleChange = () => {
    console.log(selection); // <- This here returns null or previous value
  };

  const handleSelectChange = (e: any) => {
    setSelection(e);
    handleChange();
  };

  return (
    <>
      <select onChange={(e) => handleSelectChange(e.target.value)}>
        <option value="1">1</option>
        <option value="2">2</option>
      </select>
    </>
  );
};

When I select an option, it runs "handleSelectChange", which sets "selection" state and runs "handleChange", which should log the changed value of "selection" state, but it logs null or previous value. I'm perhaps just a tad too dim for this, I know it's something to do with not correctly updating data, in non immutable way, but I've tried to read on the internet and I just can't grasp what the hell am I doing wrong. If someone can explain it, I'd show my useless gratefulness. Thank you!

[torpid temple]

ya, that's not how React works

you want useEffect() with selection as a dependency.

https://beta.reactjs.org/learn

[turbid ermine]

Hi Rytis, I think in your question you want to log a new updated data. To make that happen just simply take console.log code to outside of handleselectchange function. Because useState run asynchronous. If you put that in with state changing function you will see cached data in your previous state.

[torpid temple]

assuming they actually want a side-effect (otherwise what's the point of handleChange() at all?) it should be in a useEffect() like I said...