Issue 02: The one about Intersection Observers
Hi there 👋
I've recently been working on removing a lot of third-party packages on my websites and blog. The aim was to rely on as few dependencies as possible for any UI-related elements. While doing that I noticed something...
Most of the libraries I was using for things like lazy loading images or Scrollspy I was trying to replace were using the same thing under the hood: a little Javascript API called the Intersection Observer API and this is going to be the main subject of this second issue of my newsletter. ✨
What's the Intersection Observer API?
To keep it short: this API provides a way for you to find out if a target element intersects with a parent element or the window. I found it awesome for the following reasons:
- It's part of Javascript and thus you can use it right now in any client codebase.
- It does not work on the main thread, thus making it more performant than some alternatives such as using scroll event listeners.
What are some of the cool use-cases?
There are two things I really like using the Intersection Observer API for.
The first one is "lazy loading" especially lazy loading elements. I recently tweeted a link to a code snippet showcasing how I use Intersection Observes to load some elements at the bottom of the page of my blog. (this example still uses a third-party package, sorry for that 😅)
Not only do I lazy load these elements but I also dynamically import them at the same time! This way the related code of that element will be downloaded to the client only when the reader reaches the bottom of the page! How cool is that? 😎
The second thing I built with the Intersection Observer API recently is my own Scrollspy. I dedicated a whole blog post about it: Scrollspy Demystified that covers anything from the basics of Intersection Observer to build an efficient React Hook around them.
How to get started?
I hope the use-cases I showcased above made you curious! In case you want to learn more: here are 2 links I'd recommend checking if you want to learn more and start building stuff with the Intersection Observer API:
- The MDN Documentation: It contains the full spec of Intersection Observers including all the possible options.
- An intro to Intersection Observers with React by @PaulieScanlon: It covers brilliantly pretty much everything necessary for you to get started with Intersection Observers in your React codebase.
That's it for this one! I hope I made you a bit more curious about Intersection Observers and convinced you that they are worth taking a look at.
Thank you for reading, and have a wonderful day!
Did you like this Maxime's ideas issue? Click here to spread the word and share this newsletter on Twitter. I really appreciate your support!
Want to check out other topics I wrote about? There's a lot of great content waiting for you on my blog 👉 blog.maximeheckel.com