Get lazy loading cheap with IntersectionObserver in React

sublime-medium.js

const ExerciseItem = ({ exercise, thumbLoader }: Props) => {
  const [url, setUrl] = useState<?string>(null)
  const thisRef = useRef<?HTMLDivElement>(null)

  const media = exercise.media.id

  useEffect(() => {
    if (IntersectionObserver) {
      let observer = new IntersectionObserver(
        entries =>
          entries.forEach(entry => {
            if (entry.isIntersecting) {
              thumbLoader(media).then(setUrl)
              observer = observer.disconnect()
            }
          }),
        { rootMargin: '0px 0px 200px 0px' }
      )
      observer.observe(thisRef.current)

      return () => (observer = observer && observer.disconnect())
    } else {
      thumbLoader(media).then(setUrl)
    }
  }, [media, thumbLoader])

  return (
    <div
      css={styles.thumb}
      style={{ backgroundImage: `url(${url})` }}
      ref={thisRef}
    />
  )
}