Console log in useEffect prints nothing

Question

I can't seem to figure out why this piece of React code isn't console logging any of the values...

  const [href, setHref] = useState("");
  const [whatever, setWhatever] = useState("");

  useEffect(() => {
    setHref(window.location.href);
    setWhatever(href + " cats");

    console.log(whatever);
    console.log(href);
  }, []);

it is asynchronous, you wont see the result immediately. please read how react works. — Apostolos, Jul 05 '22 at 12:43
You should also be seeing a linting error. _"React Hook useEffect has missing dependencies: 'href' and 'whatever'. Either include them or remove the dependency array."_ — evolutionxbox, Jul 05 '22 at 12:45
https://stackoverflow.com/questions/54069253/the-usestate-set-method-is-not-reflecting-a-change-immediately — Nice Books, Jul 05 '22 at 13:23

score 0 · Answer 1 · answered Jul 05 '22 at 12:44

It prints nothing because you can not access new state immediately after you update state - state is accessed from closure and closure is recreated only after element rerenders. Since your effect is executing only once there is no way you can log new state within effect, move console log out of the effect and you will log fresh values after each rerender.

Console log in useEffect prints nothing

1 Answers1