UseDebounceStateDemo

1'use client';
2 
3import { 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 { useDebouncedState } from '@/hooks/guarahooks/use-debounce-state';
16 
17export default function UseDebounceStateDemo() {
18  const [immediateValue, setImmediateValue] = useState('');
19  const [debouncedValue, setDebouncedValue] = useDebouncedState('', 1000);
20 
21  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
22    setImmediateValue(e.target.value);
23    setDebouncedValue(e.target.value);
24  };
25 
26  return (
27    <Card className="max-w-md w-full relative">
28      <CardHeader>
29        <CardTitle>useDebounceState</CardTitle>
30        <CardDescription>
31          This component uses the <code>useDebounceState</code> hook to debounce
32          the state update.
33        </CardDescription>
34      </CardHeader>
35      <CardContent className="space-y-4">
36        <Input
37          type="text"
38          value={immediateValue}
39          onChange={handleChange}
40          placeholder="Type something..."
41        />
42      </CardContent>
43      <CardFooter className="flex-col items-start gap-1">
44        <div className="flex flex-col gap-1">
45          <span className="text-sm text-muted-foreground">
46            Immediate value:
47          </span>
48          <span className="font-mono bg-muted rounded px-2 py-1">
49            {immediateValue}
50          </span>
51        </div>
52        <div className="flex flex-col gap-1">
53          <span className="text-sm text-muted-foreground">
54            Debounced value:
55          </span>
56          <span className="font-mono bg-muted rounded px-2 py-1">
57            {debouncedValue}
58          </span>
59        </div>
60        <span className="text-sm text-muted-foreground mt-2">
61          The debounced value updates 1s after you stop typing.
62        </span>
63      </CardFooter>
64    </Card>
65  );
66}