reassure VS react-intersection-observer

In this article, I presented a few simple examples of things that can cause performance problems in the long run. As you've noticed, minor refactoring led to a 93.1% performance improvement. Even though performance issues presented in the article can be caught during a thorough PR review, that can become inherently harder in complex codebases and as your React Native app grows. Making Reassure part of your test suite to address potential performance regressions and automate things in CI would greatly benefit you in the long run. Also, if you already write tests with react-native-testing-library (If you don't, you definitely should), creating Reassure perf tests is, to some degree, a copy-paste of existing tests with slight modification so that it can be quickly introduced into the development workflow. Due to the open-source nature of Reassure, if you have improvement suggestions, feel free to create issues in the repo, and Reassure team will address them.

1. Install react-intersection-observer from Github

Alternatively, we can use a library that is designed to handle this functionality. This is the approach that we’ll follow in this article. We’ll be using the react-intersection-observer library, which is a React implementation of the intersection observer API. This library provides Hooks and render props that make it easy to track the scroll position of elements on the viewport.

This would do it for ya if you don't want to implement it yourself https://github.com/thebuilder/react-intersection-observer/blob/master/src/useInView.tsx

I'll use React-Interception-Observer to control the screen events you can check the documentation if you wanna know more.

I'm going to be using react-intersection-observer library, which uses native IntersectionObserver underneath and gives us neat hooks for ease of use.

There is no way you didn't see this package before building your own : https://github.com/thebuilder/react-intersection-observer

TL;DR; You can reduce the number of queries you make on listing pages by loading content as it gets displayed. Use react-intersection-observer to detect when an element becomes visible and react-content-loader to display a contentful placeholder loader.

*react-intersection-observer *— react implementation of the Intersection Observer API to tell you *when an element enters or leaves the viewport *(from official description). Docs here: https://github.com/thebuilder/react-intersection-observer#readme

I eventually ended up combining react-intersection-observer and react-content-loader to create a progressive loading experience where elements get loaded as they become visible to users.