React TS custom hook to intersection observer dom elements

index.js

import { useEffect, useState, useRef } from 'react'

export default function useOnScreen(ref?: any) {
  const observerRef = useRef<IntersectionObserver | null>(null)
  const [isOnScreen, setIsOnScreen] = useState(false)

  useEffect(() => {
    observerRef.current = new IntersectionObserver(([entry]) =>
      setIsOnScreen(entry.isIntersecting)
    )
  }, [])

  useEffect(() => {
    if (observerRef.current && ref?.current) {
      observerRef.current.observe(ref?.current)

      return () => {
        observerRef?.current && observerRef.current.disconnect()
      }
    }
  }, [ref])

  return isOnScreen
}

example usage:

import { useRef, useState, useEffect, HTMLAttributes } from 'react'

import Heading from 'components/Heading'
import { ReactNode } from 'react'
import * as S from './styles'
import useOnScreen from '../../hooks/use-on-screen'

export type SectionProps = {
  title?: string
  children: ReactNode
  color?: 'white' | 'black'
  titleMargin?: 'small' | 'medium' | 'large'
  sectionPadding?: 'medium' | 'large'
  isOnScreen?: boolean
} & HTMLAttributes<HTMLElement>

const Section = ({
  titleMargin = 'large',
  title,
  children,
  color = 'black',
  sectionPadding = 'medium',
  ...props
}: SectionProps) => {
  const ref = useRef(null)
  const [isOnScreen, setIsOnScreen] = useState(false)

  const onScreen = useOnScreen(ref)

  useEffect(() => {
    if (onScreen && !isOnScreen) {
      setIsOnScreen(true)
    }
  }, [isOnScreen, onScreen])

  return (
    <S.Wrapper
      ref={ref}
      isOnScreen={isOnScreen}
      titleMargin={titleMargin}
      sectionPadding={sectionPadding}
      {...props}
    >
      {!!title && <Heading color={color}>{title}</Heading>}
      {children}
    </S.Wrapper>
  )
}

export default Section