Fix: Improve useDebounce with advanced call control and unmount cleanup

[deniswaker]

Overview

This PR refactors the useDebounce hook to provide more flexible control over function execution, including support for leading and trailing call behaviors, and ensures proper cleanup on component unmount.

Changes

• Refactored useDebounce in src/hooks/use-debounce.ts to debounce a function rather than a value.
• Added leading and trailing options to control when the debounced function is invoked (immediately or after the delay).
• Ensured that pending timers are cleared when the component unmounts, preventing potential memory leaks and unexpected behavior.
• Updated JSDoc comments to reflect the new functionality and usage examples.

Summary by CodeRabbit

• Refactor

  • Debounce hook has been renamed with a simplified API. The immediate execution parameter has been removed to streamline functionality and reduce configuration complexity.

• Tests

  • Test suite updated to validate the renamed hook and its modified behavior across various delay scenarios, including edge cases and rapid updates.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

The PR renames the useDebounce hook to useDebouncedValue and removes the immediate parameter along with its associated implementation logic. The hook signature simplifies from accepting three parameters to two, retaining only value and delay. Test cases are updated to reflect the new hook name, with one test block validating the immediate-first-change behavior removed.

Changes

Cohort / File(s)	Summary
Hook API Refactor src/hooks/use-debounce.ts	Renamed exported hook from useDebounce to useDebouncedValue; removed immediate parameter and related initial-call tracking logic; simplified function signature to (value: T, delay: number = 500): T.
Test Suite Updates src/__tests__/useDebounce.test.tsx	Updated all test imports and describe blocks to reference useDebouncedValue; updated all renderHook invocations to use the new hook name; removed test block exercising immediate-first-change behavior.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Attention areas:
  • Verify all usages of useDebounce in the codebase have been updated to useDebouncedValue (breaking API change)
  • Confirm removal of the immediate parameter logic does not break existing integration tests or applications depending on that feature
  • Review documentation/migration guidance if this is a public API

Possibly related PRs

• feat: Enhance useDebounce hook with immediate flag and stronger typings #62: Modifies the same hook in src/hooks/use-debounce.ts with opposite intent—adds an immediate flag and initial-call logic rather than removing it.
• Feat: Enhance useDebounce hook with comprehensive tests #92: Updates the same hook and test file, extending or changing the immediate initial-call behavior, directly conflicting with this PR's removal of that feature.

Suggested reviewers

• fehranbit

Poem

A rabbit dances through refactor's dale,
useDebouncedValue without fail,
No immediate flag to weigh the mind—
Just value and delay aligned! 🐰
Simpler hops, a cleaner spring,
The debounce hook takes flight on wing.

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Title check	⚠️ Warning	The PR title claims to improve useDebounce with advanced call control, but the actual changes rename the hook to useDebouncedValue, remove the immediate parameter, and simplify the implementation—opposite of adding advanced control features.	Update the title to accurately reflect the actual changes, such as 'Refactor: Rename useDebounce to useDebouncedValue and remove immediate parameter' or similar.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/use-debounce-hook

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/hooks/use-debounce.ts (1)

32-32: Critical: immediate is undefined and will cause a ReferenceError.

The dependency array references immediate, but this parameter was removed from the function signature. This will throw a ReferenceError at runtime when the component mounts.

Apply this diff to fix the dependency array:

-  }, [value, delay, immediate]); // Re-run effect if value, delay, or immediate changes
+  }, [value, delay]); // Re-run effect if value or delay changes

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 36eff74 and 88a5d8b.

⛔ Files ignored due to path filters (1)

• package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (2)

• src/__tests__/useDebounce.test.tsx (7 hunks)
• src/hooks/use-debounce.ts (1 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

src/__tests__/useDebounce.test.tsx (1)

src/hooks/use-debounce.ts (1)

• useDebouncedValue (15-35)

🔇 Additional comments (2)

src/hooks/use-debounce.ts (1)

3-35: Inconsistency between PR objectives and implementation.

The PR description states: "adds configurable call behavior" with leading and trailing options for debounce control. However, the implementation only debounces a value with a simple delay—there are no leading/trailing options implemented.

Either update the PR description to accurately reflect the current implementation, or implement the advertised features.

src/__tests__/useDebounce.test.tsx (1)

7-143: LGTM! Test coverage is comprehensive.

The tests properly cover:

• Initial value return
• Debouncing behavior with timer assertions
• Multiple rapid value changes (only last value persists)
• Default delay when undefined
• Null and undefined value handling
• Timer cleanup on unmount
• Zero and negative delay edge cases

Note: These tests will fail until the critical bug (immediate undefined reference) in the hook implementation is fixed.

[coderabbitai]

⚠️ Potential issue | 🟡 Minor

Unused import: useRef.

useRef is imported but not used anywhere in the hook.

-import { useEffect, useState, useRef } from 'react';
+import { useEffect, useState } from 'react';

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	import { useEffect, useState, useRef } from 'react';
	import { useEffect, useState } from 'react';

🤖 Prompt for AI Agents

In src/hooks/use-debounce.ts around line 1, the React import includes useRef
which is not used; remove useRef from the import list (i.e. import only the
hooks actually used such as useEffect and useState) to eliminate the unused
import warning and keep imports minimal.

[fehranbit]

that cleanup on unmount is key—nice touch! 🎉 merging this now.