Skip to content

Clarify why the debouncing solution uses a ref #8726

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
bibhu-3214 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Clarify why the debouncing solution uses a ref #8726

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions src/content/learn/referencing-values-with-refs.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.

<Sandpack>

```js
Expand Down
Loading