Why does setState not change state inside useEffect?

Question

What is the reason for isTrue not changing to true? As you can see I am setting it inside the useEffect. What exactly is happening here?

import React, {useState, useEffect} from "react";
import "./style.css";

export default function App() {
  const [isTrue, setIsTrue] = useState(false)

  useEffect(() => {
    setIsTrue(true)
    console.log(isTrue) //still gives me false
  }, [])

  return (
    <div>
      <h1>Hello StackBlitz!</h1>
      <p>Start editing to see some magic happen :)</p>
    </div>
  );
}

Does this answer your question? [React setState not Updating Immediately](https://stackoverflow.com/questions/38558200/react-setstate-not-updating-immediately) — Ivar, Mar 05 '21 at 10:40

score 0 · Answer 1 · answered Mar 05 '21 at 10:42

You have a closure on isTrue === false value, you can have another useEffect which listens to its changes:

export default function App() {
  const [isTrue, setIsTrue] = useState(false);

  useEffect(() => {
    setIsTrue(true);
  }, []);

  useEffect(() => {
    console.log(isTrue);
  }, [isTrue]);

  return (
    <div>
      <h1>Hello StackBlitz!</h1>
      <p>Start editing to see some magic happen :)</p>
    </div>
  );
}

Why does setState not change state inside useEffect?

1 Answers1