fix(gatsby-link) Clean up IntersectionObservers to fix a memory leak

[phacks]

Description

This PR fixes a memory leak caused by IntersectionObservers not being cleaned up in case the intersection is never reached.

Many thanks to @atomiks who did a thorough investigation on the matter and came up with this solution 👏

I tested it on https://reactjs.org with the following procedure:

• Head to https://reactjs.org/docs/getting-started.html
• Take a Heap Snapshot
• Switch back and forth to https://reactjs.org/docs/add-react-to-a-website.html multiple times
• Take another Heap snapshot
• The presence of the memory leak can be detected by filtering with Intersection in the memory heap snapshot and seeing Detached… entries.

Here’s a comparison of before and after the fix (tested locally):

🙁Before	🙂After

Related Issues

Fixes #12198.

[KyleAMathews]

Nice! Thanks!

Does this need done in gatsby-image as well?

[phacks]

Don’t know yet, will have a look tomorrow!

[phacks]

I did a bit of testing and could not reproduce the memory leak for gatsby-image. As it turns out, the leak has already been fixed by @alexandernanberg in #10278!

gatsby/packages/gatsby-image/src/index.js

Lines 322 to 326 in 49ea6dc

	componentWillUnmount() {
	if (this.cleanUpListeners) {
	this.cleanUpListeners()
	}
	}

[wardpeet]

This is great! 🎉 I feel like intersection observer should only be created once but that's not really a concern for this PR.

I added a small nit about adding a guard for this.io to make sure it exists.

[wardpeet]

Works like a charm! ❤️ thanks for fixing our bad code 😂

[sidharthachatterjee]

Thank you once again for this! Featuring it on this month's Gazette in #17548