Why isn't my state getting updated? - React Hooks version

Probably because you are using it wrong.

const [value, setValue] = useState("");
function handleChange(newValue) {
  setValue(newValue);
  console.log(value);
}

Why is your state not getting updated?

Straight out of React docs, setState may be asynchronous. What does that mean?

Let’s find out.

setTimeout(() => console.log('foo'), 0);
console.log('bar');

What is the output?

First the second console.log fires and then the first one inside the setTimeout function. This happens because setTimeout is asynchronous and is moved to the browser thread. So the code that runs after setTimeout gets executed however small the timeout is.

Same is the case with setState Because of it’s asynchronous state, the statement after is being called before the actual setState function.

---

How do we fix this?

React calls the functional component once again whenever the state is updated. Hence, to see the updated state, just look in the render.

function App() {
  const [value, setValue] = useState("");
  function handleChange(newValue) {
    setValue(newValue);
  }
  console.log(value);
  ...
}

But in real world react components, there would be multiple states (and props) and this would trigger the console.log every time any one of these is updated. Instead, a more effective approach would be:

function App() {
  const [value, setValue] = useState("");
  useEffect(() => {
    console.log(value);
  }, [value]);
  function handleChange(newValue) {
    setValue(newValue);
  }
  ...
}

Note that the useEffect has the required state as dependency and thus would run whenever it is changed.

---

Cross Posted from my Blog