UseOnMountDemo

1'use client';
2 
3import React, { useState } from 'react';
4 
5import {
6  Card,
7  CardContent,
8  CardDescription,
9  CardFooter,
10  CardHeader,
11  CardTitle,
12} from '@/components/ui/card';
13 
14import { useOnMount } from '@/hooks/guarahooks/use-on-mount';
15 
16export function ExampleComponent() {
17  const [message, setMessage] = useState('Waiting for mount...');
18 
19  useOnMount(() => {
20    setMessage('The component has been mounted!');
21    console.log('Component mounted!');
22  });
23 
24  return (
25    <Card className="max-w-sm w-full relative">
26      <CardHeader>
27        <CardTitle>useOnMount</CardTitle>
28        <CardDescription>
29          This example uses the <code>useOnMount</code> hook to execute a
30          function only once when the component is mounted.
31        </CardDescription>
32      </CardHeader>
33      <CardContent>
34        <p>{message}</p>
35      </CardContent>
36      <CardFooter>
37        <p className="text-sm text-muted-foreground">
38          Check console for more information.
39        </p>
40      </CardFooter>
41    </Card>
42  );
43}