Hook - useFadeIn

import React, { useEffect, useRef, useState } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

const useFadeIn = (duration = 1, delay = 0) => {
  if (typeof duration !== "number" || typeof delay !== "number") {
    return;
  }
  const element = useRef();

  useEffect(() => {
    if (element.current) {
      const { current } = element;
      current.style.transition = `opacity ${duration}s ease-in-out ${delay}s`;
      current.style.opacity = 1;
    }
  }, []);
  return { ref: element, style: { opacity: 0 } };
};

const App = () => {
  const FadeInH1 = useFadeIn(2, 2);
  const FadeInp = useFadeIn(2, 5);
  return (
    <div className="App">
      <h1 {...FadeInH1}> Hello~ </h1>
      {/* <h1 ref={el} style={{opacity:0.5}}>A </h1>  위와 동일*/} 
      <p {...FadeInp}>We can fadein !! </p>
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);