UseDebounceCallbackDemo

1'use client';
2 
3import React, { useCallback, useState } from 'react';
4 
5import {
6  Card,
7  CardContent,
8  CardDescription,
9  CardFooter,
10  CardHeader,
11  CardTitle,
12} from '@/components/ui/card';
13import { Input } from '@/components/ui/input';
14 
15import { useDebounceCallback } from '@/hooks/guarahooks/use-debounce-callback';
16 
17export function UseDebounceCallbackDemo() {
18  const [inputValue, setInputValue] = useState('');
19  const [debouncedValue, setDebouncedValue] = useState('');
20 
21  const updateDebouncedValue = useCallback((value: string) => {
22    setDebouncedValue(value);
23  }, []);
24 
25  const debouncedUpdate = useDebounceCallback(updateDebouncedValue, 500);
26 
27  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
28    const value = e.target.value;
29    setInputValue(value);
30    debouncedUpdate(value);
31  };
32 
33  return (
34    <Card className="max-w-md w-full relative">
35      <CardHeader>
36        <CardTitle>useDebounceCallback</CardTitle>
37        <CardDescription>
38          This component uses the <code>useDebounceCallback</code> hook to
39          debounce the callback function to control the input value.
40        </CardDescription>
41      </CardHeader>
42      <CardContent>
43        <Input
44          type="text"
45          value={inputValue}
46          onChange={handleChange}
47          placeholder="Type something..."
48          className="w-full"
49        />
50      </CardContent>
51      <CardFooter className="flex-col items-start gap-2">
52        <p className="text-sm text-muted-foreground">
53          <strong>Immediate value:</strong> {inputValue}
54        </p>
55        <p className="text-sm text-muted-foreground">
56          <strong>Debounced value:</strong> {debouncedValue}
57        </p>
58      </CardFooter>
59    </Card>
60  );
61}