Boostez votre app React avec un hook personnalisé : useOnScreen

Lorsqu'il s'agit de construire des applications web, les performances sont un facteur critique pour garantir une expérience utilisateur fluide. Une exigence courante est de déterminer si un élément est actuellement visible à l'écran. Cette tâche est essentielle pour mettre en œuvre des fonctionnalités telles que le chargement progressif des images, le défilement infini ou le suivi d'événements basés sur la visibilité. Dans cet article, je vais vous présenter un hook React personnalisé appelé useOnScreen, qui simplifie la détection de la visibilité dans les applications React, facilitant ainsi la vie des développeurs.

Présentation de useOnScreen

Le hook useOnScreen est conçu pour vous aider à détecter si un élément est actuellement visible à l'écran ou non. Il exploite l'API Intersection Observer, une fonctionnalité JavaScript moderne qui vous permet de surveiller les changements de visibilité des éléments. Grâce à ce hook, vous pouvez facilement déterminer si un élément se trouve dans le viewport, ce qui vous permet de déclencher des actions en conséquence.

Voici comment fonctionne le hook useOnScreen :

1import { RefObject, useEffect, useState } from 'react'
2
3export const useOnScreen = (ref: RefObject<any>) => {
4  const [isIntersecting, setIntersecting] = useState(false)
5  const observer = new IntersectionObserver(([entry]) => setIntersecting(entry.isIntersecting))
6
7  useEffect(() => {
8    observer.observe(ref.current)
9    return () => {
10      observer.unobserve(ref.current)
11    }
12  }, [])
13
14  return isIntersecting
15}

Comment utiliser useOnScreen

Voici un exemple complet de l'utilisation du hook useOnScreen pour charger progressivement une image lorsque l'utilisateur fait défiler la page et que l'image devient visible :

1import React, { useRef } from 'react'
2import { useOnScreen } from './useOnScreen'
3
4function App() {
5  const imageRef = useRef()
6  const isImageVisible = useOnScreen(imageRef)
7
8  return (
9    <div>
10      <div style={{ height: '100vh' }}>Scroll down</div>
11      <div ref={imageRef}>
12        {isImageVisible && (
13          <img src="image.jpg" alt="Image" />
14        )}
15      </div>
16    </div>
17  )
18}
19
20export default App