Loading...
``` > À noter que le paramètre `options` est totalement optionnel et pourra donc être omis. Parfait, nous sommes désormais prêts à nous attaquer concrètement à l'implémentation. Commençons par définir le squelette du Hook. ```jsx const useInView = (target, options = {}) => { const [isIntersecting, setIsIntersecting] = useState(false); return isIntersecting; }; ``` Ensuite, nous allons créer la logique des _Intersection Observers_. Pour ce faire, on va instancier un `IntersectionObserver` dès que le Hook sera monté. Comme nous l'avons vu précédemment, le constructeur prend en paramètre la fonction callback qui sera exécutée lorsque l'élément cible atteindra le seuil défini. Cette fonction recevra en argument la liste des entrées concernées, chacune correspondant à un seuil franchi pour un des éléments observés (dans notre cas, nous n'aurons qu'un seul élément cible et cette liste contiendra donc un seul élément). La fonction callback est donc aussi simple que ça : ```jsx const callback = entries => { setIsIntersecting(entries[0].isIntersecting); }; ``` Génial. Avec cette fonction callback et les options que nous recevons en arguments, nous pouvons instancier un `IntersectionObserver`. ```jsx const useInView = (target, options = {}) => { const [isIntersecting, setIsIntersecting] = useState(false); const [observer, setObserver] = useState(null); useEffect(() => { const callback = entries => { setIsIntersecting(entries[0].isIntersecting); }; const _observer = new IntersectionObserver(callback, options); setObserver(_observer); }, []); return isIntersecting; }; ``` Pour l'instant, rien ne se passe. En effet, nous devons observer l'élément cible après avoir créé cette instance, afin que la fonction callback soit appelée en conséquence lorsque cela sera nécessaire. ```jsx useEffect(() => { const callback = entries => { setIsIntersecting(entries[0].isIntersecting); }; const _observer = new IntersectionObserver(callback, options); _observer.observe(target); setObserver(_observer); }, []); ``` Super. Maintenant, nous devons faire attention à quelque chose : lorsque le Hook sera démonté, nous devrons arrêter d'observer l'élément cible afin que la fonction callback ne soit pas appelée lorsqu'elle ne devrait pas. Pour ce faire, nous allons renvoyer une fonction de nettoyage dans l'appel à `useEffect`, qui se chargera de se déconnecter de l'_observer_ quand le Hook sera démonté. ```jsx useEffect(() => { const callback = entries => { setIsIntersecting(entries[0].isIntersecting); }; const _observer = new IntersectionObserver(callback, options); _observer.observe(target); setObserver(_observer); return () => { observer?.disconnect(); }; }, []); ``` > On utilise ici l'opérateur de chaînage optionnel (`?.`) pour éviter de rencontrer des erreurs si, > pour une raison ou une autre, l'*observer* est `null`. Voilà qui est beaucoup mieux ! Nous nous rapprochons de la fin. Il ne nous reste qu'une chose à régler : nous devons écouter les changements de valeur de nos arguments. Par exemple, si l'élément cible ou le seuil de visibilité changent, nous devons mettre à jour l'_observer_ en conséquence. Pour ce faire, nous allons les ajouter à la liste de dépendences du Hook `useEffect`, dans lequel nous nous déconnecterons du précédent _observer_ (s'il existe) pour en créer une nouvelle instance avec les valeurs mises à jour. ```jsx useEffect(() => { const callback = entries => { setIsIntersecting(entries[0].isIntersecting); }; observer?.disconnect(); // On se déconnecte du précédent observer // target.current peut être null, auquel cas on ne fait rien if (target.current) { const _observer = new IntersectionObserver(callback, options); _observer.observe(target); setObserver(_observer); } return () => { observer?.disconnect(); }; }, [target.current, options.root, options.rootMargin, options.threshold]); ``` Eh voilà, notre Hook est maintenant terminé et prêt à être utilisé. Voici le résultat final. ```jsx const useInView = (target, options = {}) => { const [isIntersecting, setIsIntersecting] = useState(false); const [observer, setObserver] = useState(null); useEffect(() => { const callback = entries => { setIsIntersecting(entries[0].isIntersecting); }; observer?.disconnect(); if (target.current) { const _observer = new IntersectionObserver(callback, options); _observer.observe(target); setObserver(_observer); } return () => { observer?.disconnect(); }; }, [target.current, options.root, options.rootMargin, options.threshold]); return isIntersecting; }; ``` ## Utilisation Dans la première partie de cet article, nous avons parlé de _Facebook_ pour introduire les _Intersection Observers_. Nous allons simuler un concurrent, que l'on appellera _Fuzebook_. Dans l'extrait de code ci-dessous, nous chargeons le fil de l'utilisateur. L'élément cible de notre _Intersection Observer_ sera un paragraphe situé en bas de la page, qui contient le texte "Loading more posts...". On pourrait également utiliser une autre cible, comme un _spinner_ ou le pied de page. Dans tous les cas, cet élément ne devrait pas apparaître à l'écran, car nous définissons une _root margin_ de `150px`. Il pourrait éventuellement être visible si l'appel à `fetch` (de la fonction `getPosts`) prend quelques secondes, par exemple en cas de mauvaise connexion internet. Dans notre exemple, le scroll est infini : nous n'atteindrons jamais le bas de la page étant donné que le fil contient des centaines, voire des milliers de publications. Il serait donc inutile d'avoir un pied de page par exemple, car on ne le verrait jamais. Si la section de scroll de votre application contient moins d'éléments (moins d'une centaine), vous devriez gérer le cas où il n'y plus d'éléments à charger (il suffirait de masquer l'élément cible, c'est-à-dire le paragraphe en bas de la page ou le spinner). Voici le code du composant principal de notre application _Fuzebook_. ```jsx const App = () => { const posts = useArray([]); const page = useCounter(1); const loadingElement = useRef(null); const isIntersecting = useInView(loadingElement, { threshold: 1, rootMargin: '150px', }); // Chargement de nouveaux posts useEffect(() => { getPosts(page.value).then(newPosts => { posts.concat(newPosts); }); }, [page.value]); useEffect(() => { if (isIntersecting) { page.increment(); } }, [isIntersecting]); return (Loading more posts...