fix: IntersectionObserver error

src/Experience.js

@@ -2,7 +2,8 @@ import { Avatar, Card, CardActionArea, CardHeader, Fade, Grid, Hidden, makeStyle
 import Image from 'next/image'
 import { DateRange, LocationCity } from '@material-ui/icons';
 import { experience } from '../data.json'
-import { useEffect, useRef, useState } from "react";
+import { useRef } from "react";
+import useAnimate from "./useAnimate";
 
 const useStyles = makeStyles(theme => ({
     cont: {
@@ -60,17 +61,8 @@ export default function Experience() {
     const align = mdDown ? "center" : "flex-end"
     const textAlign = mdDown ? "center" : "right"
 
-    const [animate, setAnimate] = useState(false)
-    const animRef = useRef()
-
-    useEffect(() => {
-        const observer = new IntersectionObserver(entries => {
-            if (entries.some(entry => entry.isIntersecting))
-                setAnimate(true)
-        })
-        observer.observe(animRef.current)
-        return () => observer.unobserve(animRef.current)
-    }, [])
+    const animRef = useRef(null)
+    const animate = useAnimate(animRef)
 
     return (
         <Grid direction="row" container justify="center" alignItems="center" spacing={10} className={classes.cont}>

src/Projects.js

@@ -1,7 +1,8 @@
 import { Card, CardActionArea, CardActions, CardContent, CardHeader, Chip, Fade, Grid, Hidden, makeStyles, Typography } from "@material-ui/core";
 import { RepoForkedIcon, RepoIcon, StarIcon } from '@primer/octicons-react';
 import Image from 'next/image'
-import { useEffect, useRef, useState } from "react";
+import { useRef } from "react";
+import useAnimate from "./useAnimate";
 
 const useStyles = makeStyles(theme => ({
     cont: {
@@ -20,17 +21,8 @@ export default function Projects({ data }) {
 
     const classes = useStyles()
 
-    const [animate, setAnimate] = useState(false)
-    const animRef = useRef()
-
-    useEffect(() => {
-        const observer = new IntersectionObserver(entries => {
-            if (entries.some(entry => entry.isIntersecting))
-                setAnimate(true)
-        })
-        observer.observe(animRef.current)
-        return () => observer.unobserve(animRef.current)
-    }, [])
+    const animRef = useRef(null)
+    const animate = useAnimate(animRef)
 
     return (
         <Grid direction="row-reverse" container justify="center" alignItems="center" spacing={10} className={classes.cont}>

src/Skills.js

@@ -2,9 +2,10 @@ import { Avatar, Fade, Grid, Hidden, makeStyles, Tooltip, Typography, useMediaQu
 import Cancel from "@material-ui/icons/Cancel";
 import clsx from "clsx";
 import Image from 'next/image'
-import { useEffect, useRef, useState } from "react";
+import { useRef} from "react";
 import simpleIcons from 'simple-icons'
 import { skills } from '../data.json'
+import useAnimate from "./useAnimate";
 import { iconify } from "./util";
 
 const wrapper = (sk = []) => sk.map(v => {
@@ -58,17 +59,8 @@ export default function Skills() {
     const align = mdDown ? "center" : "flex-end"
     const textAlign = mdDown ? "center" : "right"
 
-    const [animate, setAnimate] = useState(false)
-    const animRef = useRef()
-
-    useEffect(() => {
-        const observer = new IntersectionObserver(entries => {
-            if (entries.some(entry => entry.isIntersecting))
-                setAnimate(true)
-        })
-        observer.observe(animRef.current)
-        return () => observer.unobserve(animRef.current)
-    }, [])
+    const animRef = useRef(null)
+    const animate = useAnimate(animRef)
 
     return (
         <Grid container justify="center" alignItems="center" spacing={10} className={classes.cont}>

src/useAnimate.js

@@ -0,0 +1,20 @@
+import { useState, useRef, useEffect } from 'react'
+
+export default function useAnimate(ref) {
+  const [animate, setAnimate] = useState(false);
+  const observerRef = useRef(null)
+
+  useEffect(() => {
+    observerRef.current = new IntersectionObserver(entries => {
+      if (entries.some(entry => entry.isIntersecting))
+          setAnimate(true)
+  })
+  }, [])
+
+  useEffect(() => {
+    observerRef.current.observe(ref.current)
+    return () => observerRef.current.disconnect()
+  }, [ref])
+
+  return animate
+}