antonioru/beautiful-react-hooks

useDebouncedCallback doesn't consider its dependencies

Open

#420 opened on Nov 29, 2023

View on GitHub
 (3 comments) (2 reactions) (0 assignees)JavaScript (7,095 stars) (505 forks)batch import
buggood first issuehelp wanted

Description

Describe the bug

This is the same issue reported in #386 for useDebouncedCallback, I don't know why that issue has been closed. I'd expect that any dependency given as args will invalidate the callback but that's not the case because deps are not given to the useEffect call here. As result the callback sees the values as one step behind.

To Reproduce

Here's a codesandbox to reproduce the issue https://codesandbox.io/p/sandbox/pedantic-grass-f9f6qw

Expected behavior

When I click on useDebouncedCallback button I should see same values as other buttons in console, but I see the old counter value.

Screenshots

image

Contributor guide

Tech stack
typescriptreact
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
under 1 hour
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
understanding of React hooksfamiliarity with useEffect dependencies
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
80
Research direction
The fix is in src/useDebouncedCallback.ts line 28, where the useEffect call is missing dependencies. Add the deps array to the useEffect dependency list. The issue also references #386 for similar fix in useDebouncedCallback. Check that file and the code sandbox for expected behavior. Ensure the debounced function updates when dependencies change.