Implement a Debounced Search Input in React

This challenge involves creating a reusable search input component in React using TypeScript. The core requirement is to implement debouncing for the search input, which means delaying the execution of a search function until a certain period of inactivity has passed after the user stops typing. This is crucial for optimizing API calls and improving user experience by preventing excessive requests.

Problem Description

You need to build a React component called DebouncedSearchInput. This component should accept a prop for the function to be called when the debounced search value changes. The component should render a standard HTML <input type="text" /> element.

Key Requirements:

• Debouncing: Implement a debounce mechanism for the input's onChange event. The provided search function should only be called after the user has stopped typing for a specified delay (e.g., 300ms).
• State Management: The component should manage its own input value internally.
• Prop for Search Function: The component should accept a prop named onSearch which is a function that takes the current input value (string) as an argument.
• TypeScript: The entire implementation should be in TypeScript, ensuring type safety for props and internal state.
• Clear Button (Optional but Recommended): Consider adding a clear button within the input field (or next to it) that resets the input value and triggers onSearch with an empty string.

Expected Behavior:

1. When the user types into the input field, the onSearch function should not be called immediately.
2. If the user continues typing within the debounce delay, the timer should reset.
3. Once the user stops typing for the specified delay, the onSearch function should be called with the current value of the input field.
4. If the input value is cleared (either by the user or via a clear button), onSearch should be called with an empty string.

Edge Cases to Consider:

• Initial Render: onSearch should not be called on initial render.
• Rapid Typing: Ensure the debounce logic correctly handles rapid typing without making unnecessary calls.
• Unmounting: If the component unmounts while a debounce timer is active, the timer should be cleared to prevent memory leaks or unexpected behavior.

Examples

Example 1:

Input Component State (Internal):

User types "app" then stops. Debounce delay: 300ms.

onSearch Call: After 300ms of inactivity, onSearch("app") is called.

Explanation: The onSearch function is only invoked after the user has paused typing for the defined delay.

Example 2:

Input Component State (Internal):

User types "apple" User pauses for 200ms. User types "pie"

onSearch Call: onSearch("applepie") is called 300ms after the user stops typing "pie".

Explanation: Each keystroke resets the debounce timer. The final onSearch call reflects the complete, debounced value.

Example 3: Clearing the Input

Input Component State (Internal):

User types "search term" User clicks a hypothetical clear button.

onSearch Call: onSearch("") is called immediately upon clearing.

Explanation: Clearing the input should trigger the onSearch function with an empty string.

Constraints

• The debounce delay should be configurable or set to a reasonable default (e.g., 300ms). You can hardcode this for simplicity if you prefer, but making it a prop would be a more robust solution.
• The onSearch prop must be a function that accepts a single string argument.
• The component should not rely on external state management libraries for its internal input value.

Notes

• Consider using setTimeout and clearTimeout for implementing the debouncing logic.
• The useEffect hook in React is well-suited for managing side effects like timers and handling component unmounts.
• Think about how you will manage the input's controlled state within your component.
• For a more advanced version, you could make the debounce delay a prop.