From 8bff0070ab81dc64579520f06cc0d98336c1aa52 Mon Sep 17 00:00:00 2001 From: Bibhu Prasad Sahu Date: Mon, 2 Nov 2026 13:04:41 +0530 Subject: [PATCH] Clarify why the debouncing solution uses a ref --- src/content/learn/referencing-values-with-refs.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/content/learn/referencing-values-with-refs.md b/src/content/learn/referencing-values-with-refs.md index 657d3ddcb00..cf6b03fd013 100644 --- a/src/content/learn/referencing-values-with-refs.md +++ b/src/content/learn/referencing-values-with-refs.md @@ -527,6 +527,8 @@ button { display: block; margin: 10px; } A variable like `timeoutID` is shared between all components. This is why clicking on the second button resets the first button's pending timeout. To fix this, you can keep timeout in a ref. Each button will get its own ref, so they won't conflict with each other. Notice how clicking two buttons fast will show both messages. +Moving `let timeoutID` inside `DebouncedButton` would also keep the buttons independent in this example, because they don't re-render. However, if a button re-rendered (for example, because its parent re-rendered), the component would create a new local variable, so the next click couldn't clear the previous timeout. Using `useRef` preserves the timeout ID between renders. + ```js