I recently discovered the following surprise from this article.

import { useState } from "react";

export default function App() {
  const rerender = useState()[1];
  return (
    <div ref={(e) => console.log("ref", e)} onClick={() => rerender({})}>
      click to remount
    </div>
  );
}

In the above code sample, in every render cycle, the ref will first be null and then the ref will be set to the actual HTML element.

Thus, the console logs look like this:

ref <div>click to remount</div>
-----
ref  null
-----
ref  <div>click to remount</div>

I do not expect that the ref would be null during the first step of each render cycle, as the underlying DOM node is not changing. Why is the ref being set to null during each render cycle?

Code Sandbox from article