useEffect inside refreshed code runs needlessly

[foucdeg]

This is a component with a "mock" useEffect that tracks changes to variables.

function MyComponent() {
  const variable = "hello"
  const oldValueRef = useRef()

   useEffect(() => {
    console.log("variable changed", oldValueRef.current, variable)
    oldValueRef.current = variable
   }, [variable])

  return <div>Hi</div>
}

When this component gets hot reloaded, a log line is printed.

variable changed "hello" "hello"

If this is an effect from the component getting remounted, I'd expect the ref to be cleared, oldValueRef.current to be undefined at the time the log is printed, and we would see

variable changed undefined "hello"

If it is just getting rerendered, the useEffect shouldn't be triggered from an unchanged string dependency, and there should be no logs at all.

What could cause this?

Package versions in use:

• @pmmmwh/react-refresh-webpack-plugin 0.5.11
• react-refresh 0.14.0
• react 18.2.0 NOT using StrictMode (this definitely looks like StrictMode behaviour, but isn't)
• webpack 4.46.0

[pmmmwh]

This is expected behaviour from react-refresh. Effects are always re-run when components are hot-reloaded.