Could someone tell my why this code causes such a massive increase in LCP?
Unanswered
Sokoke posted this in #help-forum
SokokeOP
"use client"
import React, { FC, ReactNode, useEffect, useRef, useState } from 'react';
interface RevealOnceProps {
children: ReactNode;
}
const RevealOnce: FC<RevealOnceProps> = ({ children }) => {
const ref = useRef<HTMLDivElement>(null);
const [hasAnimated, setHasAnimated] = useState(false);
useEffect(() => {
const observer = new IntersectionObserver(
(entries) => {
const [entry] = entries;
if (entry.isIntersecting && !hasAnimated) {
animateIn();
setHasAnimated(true);
observer.unobserve(entry.target);
}
},
{ rootMargin: "0px", threshold: 0.2 }
);
const element = ref.current;
if (element) {
observer.observe(element);
}
return () => {
if (element) {
observer.unobserve(element);
}
};
}, [hasAnimated]);
const animateIn = () => {
const element = ref.current;
if (element) {
element.style.opacity = "1";
element.style.transform = "translateY(0)";
element.style.transition = "opacity 1.2s, transform 1.2s";
}
};
return (
<div ref={ref} style={{ opacity: 0, transform: "translateY(40px)" }}>
{children}
</div>
);
};
export default RevealOnce;
This causes around a 5 second increase in LCP when measured in pagespeed.web.dev