react fade on mount

1import { useEffect, useState } from "react";
2
3const useFadeOnMount = () => {
4    const [show, setShow] = useState(false);
5
6    useEffect(() => {
7        if (!show) {
8            setShow(true)
9        }
10    }, [show]);
11
12
13    const fadeProps = {
14        transition: `opacity 0.7s ease-in-out`,
15        opacity: show ? 1 : 0,
16    };
17
18    return [fadeProps];
19};
20
21export default useFadeOnMount;
22
23
24
25--------------other file
26import useFadeOnMount from "../../hooks/useFade"
27
28const [fadeProps] = useFadeOnMount();
29
30
31<div style={fadeProps}>
32  ...
33</div>