antonioru/beautiful-react-hooks

useDebouncedCallback doesn't consider its dependencies

Open

#420 geöffnet am 29. Nov. 2023

Auf GitHub ansehen
 (3 Kommentare) (2 Reaktionen) (0 zugewiesene Personen)JavaScript (7.095 Stars) (505 Forks)batch import
buggood first issuehelp wanted

Beschreibung

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
SchwierigkeitGeschätzte Implementierungsschwierigkeit für neue Contributors, von 1 für sehr kleine Änderungen bis 5 für Expertenarbeit.
2
Geschätzte ZeitEin grober Zeitrahmen, um zu recherchieren, zu implementieren, zu testen und einen Pull Request vorzubereiten.
under 1 hour
AktivitätsstatusWie verfügbar das Issue gerade wirkt: frisch, aktiv, stale, blockiert oder wartet auf Maintainer-Input.
fresh
KlarheitWie klar das Issue die erwartete Änderung, Akzeptanzkriterien und den nächsten Schritt erklärt.
clear
Voraussetzungen
understanding of React hooksfamiliarity with useEffect dependencies
EinsteigerfreundlichkeitEin Score von 1 bis 100, der schätzt, wie zugänglich dieses Issue für First-Time Contributors ist.
80
Research-Richtung
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.