refactor: make use-intersection-observer hook

src/shared/components/about-counter.tsx

@@ -1,40 +1,16 @@
 'use client';
 
 import { Users } from 'lucide-react';
-import { useEffect, useRef, useState } from 'react';
 
 import { useTextController } from '@/shared/language/hooks/use-text-controller';
 
+import { useIntersectionObserver } from '../hooks/use-intersection-observer';
 import AnimatedCounter from './animated-counter';
 
 export default function AboutCounter() {
-  const [isVisible, setIsVisible] = useState(false);
-  const sectionRef = useRef<HTMLDivElement>(null);
-
   const { t } = useTextController();
 
-  useEffect(() => {
+  const { sectionRef, isVisible } = useIntersectionObserver<HTMLDivElement>();
-    const observer = new IntersectionObserver(
-      (entries) => {
-        const [entry] = entries;
-        if (entry.isIntersecting) {
-          setIsVisible(true);
-          observer.disconnect();
-        }
-      },
-      {
-        threshold: 0.1,
-      },
-    );
-
-    if (sectionRef.current) {
-      observer.observe(sectionRef.current);
-    }
-
-    return () => {
-      observer.disconnect();
-    };
-  }, []);
 
   return (
     <div

src/shared/hooks/use-intersection-observer.ts

@@ -0,0 +1,31 @@
+import { useEffect, useRef, useState } from 'react';
+
+export const useIntersectionObserver = <T extends HTMLElement>() => {
+  const [isVisible, setIsVisible] = useState(false);
+  const sectionRef = useRef<T>(null);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const [entry] = entries;
+        if (entry.isIntersecting) {
+          setIsVisible(true);
+          observer.disconnect();
+        }
+      },
+      {
+        threshold: 0.1,
+      },
+    );
+
+    if (sectionRef.current) {
+      observer.observe(sectionRef.current);
+    }
+
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
+  return { sectionRef, isVisible };
+};

src/widgets/stats-section.tsx

@@ -1,40 +1,15 @@
 'use client';
 
-import { useEffect, useRef, useState } from 'react';
-
 import { Container } from '@/shared/components/container';
+import { useIntersectionObserver } from '@/shared/hooks/use-intersection-observer';
 import { useTextController } from '@/shared/language/hooks/use-text-controller';
 
 import AnimatedCounter from '../shared/components/animated-counter';
 
 export function StatsSection() {
-  const [isVisible, setIsVisible] = useState(false);
-  const sectionRef = useRef<HTMLDivElement>(null);
-
   const { t } = useTextController();
 
-  useEffect(() => {
+  const { sectionRef, isVisible } = useIntersectionObserver<HTMLDivElement>();
-    const observer = new IntersectionObserver(
-      (entries) => {
-        const [entry] = entries;
-        if (entry.isIntersecting) {
-          setIsVisible(true);
-          observer.disconnect();
-        }
-      },
-      {
-        threshold: 0.1,
-      },
-    );
-
-    if (sectionRef.current) {
-      observer.observe(sectionRef.current);
-    }
-
-    return () => {
-      observer.disconnect();
-    };
-  }, []);
 
   return (
     <section ref={sectionRef} className='bg-red-600 text-white'>