[useIntersectionObserver] Introduce new API

Note: This proposal is in its very early stage.

The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document’s viewport.

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

Implementation should somewhat look like useScrollTrigger

Current Behavior 😯

User implemented

Examples 🌈

• https://medium.com/the-non-traditional-developer/how-to-use-an-intersectionobserver-in-a-react-hook-9fb061ac6cb5

Context 🔦

• Mount component when it intersects with the DOM.

Benchmark

• https://github.com/joshwnj/react-visibility-sensor
• https://github.com/researchgate/react-intersection-observer
• https://react-restart.github.io/hooks/api/useIntersectionObserver
• https://github.com/thebuilder/react-intersection-observer
• https://github.com/twobin/react-lazyload

[maerzhase]

IMHO if you decide on using a generic library (e.g. react-intersection-observer) material-ui itself should focus on providing a component-based API e.g. the Reveal component I propose in #23960 and not a hook-based API like useScrollTrigger, because it would obfuscate the usage of the library somehow.

[oliviertassinari]

To further expand on my reasoning.we can compare the usage rate between the generic API https://github.com/thebuilder/react-intersection-observer and the specialized one: https://github.com/jasonslyvia/react-lazyload, https://github.com/bvaughn/react-virtualized. There is a x10 difference. I believe working on this would be a distraction for us.

In the future, I think that it would be great to explore the potential of an image component for Material-UI. Maybe something that comes with display transition, lazyload, error handling. Not a priority either, but I’m wondering about the potential 🤔.