scrollHandler | High Performance javaScript Scroll Handler for lazy load | Animation library

I am developing a react-app and have used the following function to track the active links in my navigation panel.

The following function uses IntersectionObserver to track if the given element is in the viewport or not.

The code is able to solve its motive.
But when I change the route to different component it shows a error - TypeError: Cannot read property 'parentElement' of null

That's because the component using the function changeActiveLink(); is not longer in the page (it was unmounted).

I want to remove the effects of this function when the component is removed.

I tried integrating it with DOMContentLoaded eventListener and then cleaning that event listener but this event listener only works on first render of HTML document and does not works when we render the component on required route leaving the function changeActiveLink(); uninitialized.

How should I make this function work only in this specific component and avoid its effect on other components ?

Screenshot of error screen

I have a React web app where my Appbar options have links associated with them, which underlined and turned the font purple. I also have a scroll function that changes the text color to black once I have scrolled down from the top position on the page.

I can't figure out how to make the text color white, while keeping the color change functionality on change.

Header

I'm working on a Next.js app and trying to create infinite scroll and search input.

Infinite scroll will load 6 more items when ever the user reach the bottom of the page. Search input will filter the results and will return only items with the string input in their title.

Both of the feature works fine alone, the problem is combining them.

The issue stages are:

1. enter search input - e.g. "a"
2. scroll to the bottom of the page

Expected: More results with the "a" search filter on.

Actual: search is an empty string, so no filter is on the results.

When debugging the scrollHandler function, search prop is an empty string, even when search param present in the URL query.

getServerSideProps:

I have asked this question (ScaleY a svg while followed by the below text divs) and now I'm trying to format this code to React.js. Here's what I have so far. The issue occur when the window.scroll() occurs, that sets the image height to 0. I don't get what I am doing wrong here (and I'm still learning react.js) so any help would be greatly appreciated.

Here's the relevant JSX code:

First, in the componentDidMount,state and render:

i'm using useRef for addEventListener but doesn't work, is something wrong here?

parent component:

I want to build infinity scroll from scratch.Here is code:

After a transaction I did, I started getting an error like this. How can I solve the problem?

I wrote the code in React Native as typescript

The file supporting useScrollHandler.ts in the lib folder in the react-native-dash folder in the node-modules file seems to have been deleted.

When site is loading, page starts from body and I have to scroll up to see styled header.

(But this problem does not appear on all browsers)

I want to start scrolling with the Header.

Here is the live site: http://pavlorishko228-001-site1.btempurl.com/

Code:

In this code i want to make paralax effect with some elements, but whatever i do only one of elements is moving, i dont know where's problem :/

I tried diffrent things but only the last form array (ParaElements) is moving no matter how many obj were made.