Impurity of `useSyncedRef` breaking debug experience with React Developer Tools

[stonekyx]

Prior Issues

No prior issue in this repository, but it's probably related with facebook/react#19114 (comment) .

What is the current behavior?

When using hooks that depend on useSyncedRef, like useTimeoutEffect, state updates will stop working if React Developer Tools is open.

Steps to Reproduce

https://codesandbox.io/s/billowing-rain-lwrjqd?file=/src/App.js:50-61

1. Open the sandbox link above.
2. Click "Open in New Window" button on the top-right corner of the preview section.
3. Once the page loads, "false" should be displayed, and after 1 second, it changes to "true". This is expected.
4. Open your browser's developer tool (Firefox or Chrome), switch to Components tab in React Developer Tools. (If you haven't installed React Developer Tools yet, it can be found here: https://github.com/facebook/react/blob/main/packages/react-devtools-extensions/README.md)
5. Click to focus on the only component, App.
6. Refresh the page. This time "false" is displayed, and it never changes to "true".

What is the expected behavior?

useTimeoutEffect should work regardless of whether React Developer Tools is open or not.

Environment Details

• @react-hookz/web version: 23.0.0
• react version: 18.2.0
• react-dom version: 18.2.0
• typescript version: N/A (using JavaScript in the code sandbox above)
• OS: macOS
• Browser: Firefox 114.0.2
• Did this work in previous versions? I don't think so. The useTimeoutFn in react-use does work though.