Get lazy loading cheap with IntersectionObserver in React

sublime-medium.js

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

  useEffect(() => {
    let observer = new IntersectionObserver(
      entries => entries.forEach(entry => {
        if (entry.isIntersecting) {
          thumbLoader(media).then(setUrl)
          observer = observer.disconnect()
        }
      })
    )
    observer.observe(thisRef.current)

    return () => (observer = observer && observer.disconnect())
  }, [media, thumbLoader])

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