If I have a page with a with ref (made with useRef), and I have a component that uses that ref … maybe something like this:

const MyComponent = () => {
  const ref = useRef();
  console.log(ref, 'the ref');
  if (ref?.current) {
     // do some calculation based on ref.current
  }
  return <div ref={ref}>Hello World</div>;
}

Everything works great, and in the console I’ll see:

null, the ref
{currrent: ...}, the ref

as the component renders the first time without a ref, and then a second time with it.

However, with the React Dev Tools, when I refresh the page the ref gets lost. In the console I will just see:

null, the ref

Presumably the devtools are trying to save time … but in the process they are skipping the ref-setting. I can force the dev tools to work properly by changing a character in my code, saving, changing it back, and saving again, but it’s annoying.

My question is, is there any way I can tell the React dev tools “stop saving time and screwing up my refs”?