Why is savedCallback.current !== null?

[dense arch]

function Counter() {
  const [count, setCount] = useState(0);
  const savedCallback = useRef(null);

  function callback() {
    setCount(count + 1);
  }

  useEffect(() => {
    savedCallback.current = callback;
  });

  useEffect(() => {
    function tick() {
      savedCallback.current();
    }

    let id = setInterval(tick, 1000);
    return () => clearInterval(id);
  }, []);

  return <h1>{count}</h1>;
}```
When the component mounts, the second `useEffect` is run first. But shouldn't `savedCallback.current` be `null` since the first `useEffect` hasn't run yet?

[haughty patio]

Why do you think the second useEffect is run first? Hint: it isn't. The first useEffect has absolutely already run prior to the second one. They're run in the order of the source code.

[dense arch]

I thought the second one was run on mount, and the first is run after render

Thank you though :)

Oh wait but the first will also be run on mount

I forgot that

[haughty patio]

Correct. Hence they're run in order 🙃

https://react.dev/reference/react/useEffect#examples-dependencies

And to be very specific both run after first render. But the second won't run on re-renders.

[dense arch]

Oh really? Neither of them after mount and before render?

That's nice to know

[haughty patio]

Correct.

[dense arch]

I remember reading that somewhere before actually, it's hard to remember everything 😅