UseDidUpdateDemo

1'use client';
2 
3import React, { useState } from 'react';
4 
5import { Button } from '@/components/ui/button';
6import {
7  Card,
8  CardContent,
9  CardDescription,
10  CardHeader,
11  CardTitle,
12} from '@/components/ui/card';
13 
14import { useDidUpdate } from '@/hooks/guarahooks/use-did-update';
15 
16export default function UseDidUpdateDemo() {
17  const [count, setCount] = useState(0);
18  const [message, setMessage] = useState('');
19 
20  useDidUpdate(() => {
21    setMessage(`The count was updated to ${count}`);
22  }, [count]);
23 
24  return (
25    <Card className="relative max-w-md w-full">
26      <CardHeader>
27        <CardTitle>useDidUpdate</CardTitle>
28        <CardDescription>
29          This example uses the <code>useDidUpdate</code> hook to execute a
30          function when the count state is updated.
31        </CardDescription>
32      </CardHeader>
33      <CardContent className="space-y-4">
34        <div className="flex flex-col items-center gap-4">
35          <p className="text-2xl font-bold">{count}</p>
36          <Button onClick={() => setCount((c) => c + 1)}>Increment</Button>
37          <p className="text-sm text-muted-foreground mt-2">{message}</p>
38        </div>
39      </CardContent>
40    </Card>
41  );
42}