Add useRef usage example for detecting DOM changes

[mattcarrollcode]

Inspired by @chaance's Bluesky post

Preview

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
19-react-dev	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 23, 2024 8:22pm
react-dev	✅ Ready (Inspect)	Visit Preview		Dec 23, 2024 8:22pm

[github-actions]

Size changes

📦 Next.js Bundle Analysis for react-dev

This analysis was generated by the Next.js Bundle Analysis action. 🤖

This PR introduced no changes to the JavaScript bundle! 🙌

[gaearon]

see the second part of #7372 (comment). don't add troubleshooting just yet, instead add a recipe to useRef usage docs

[rickhanlonii]

+1 to @gaearon's feedback, just to add some more context: we have a usage example in the Learn docs and we also explain how Strict Mode helps catch this bug, but having it on this page too would be useful.

In that thread I was actually saying we should document the behavior where callback refs unmount and remount when the callback function reference changes (so you should wrap it in useCallback) which isn't mentioned anywhere in the docs. Here's a sandbox showing the difference with/without useCallback.

[mattcarrollcode]

In that thread I was actually saying we should document the behavior where callback refs unmount and remount when the callback function reference changes (so you should wrap it in useCallback) which isn't mentioned anywhere in the docs. Here's a sandbox showing the difference with/without useCallback.

Thanks for the CodeSandbox! I did see that and was planning on adding a mention of this as well but I wrote this content to better understand the problem space for myself. I'll add this in this PR or a followup.

[mattcarrollcode]

Rewrote this PR to be a usage example in useRef for detecting DOM changes