Bug: WHEN OPEN react developer tools, code will be STOP....this maybe a bug?

[zhangenming]

React version:

Steps To Reproduce

1. open react developer tools

Link to code example:

The current behavior

STOP

The expected behavior

no stop

sorry I cant open codesandbox page
this the Minimum recurrence code

export default function App() {
  const [count, set_count] = useState(0)
  const ref_count = useRef()

  ref_count.current = () => set_count(count + 1)
  

  useEffect(() => {
    var id = setInterval(() => {
      ref_count.current()
    }, 100)
    return () => clearInterval(id)
  }, [])

  return count
}

[bvaughn]

When you select a function component in DevTools, DevTools shallow renders the component to inspect its hooks. (It calls the component with props and it stubs out fake implementations of each of the built-in hooks.)

If your component follows the rules of hooks - specifically the no side effects during render - then this will not be a problem. Otherwise there may be problems (although to be clear– these potential problems can occur without DevTools too).

In this specific case, the problem is that you're mutating a ref during render:

const ref_count = useRef(ref_seti)
ref_count.current = ref_seti // <- This is not allowed

Now if DevTools runs your component to inspect it, the ref_count ref will be mutated (and stay mutated) to close over the stubbed out useState hook, which is why it will no longer do anything when called.

To "fix" this you would need to move your mutation inside of the effect, but I don't know why you'd want to wrap this function in a ref anyway when you could just call the function directly.

PS PR #18545 is mean to add an eventual warning about this.