How to handle scroll events in React?

In order to handle scroll events in React, you can attach an event listener to the window object and call a function whenever a scroll event occurs. Here's an example of how you can handle scroll events in a React component:

Create a new React component:

import React, { useEffect } from 'react';

const ScrollComponent = () => {
  
  useEffect(() => {
    window.addEventListener('scroll', handleScroll);
    return () => {
      window.removeEventListener('scroll', handleScroll);
    }
  }, []);

  const handleScroll = () => {
    console.log('Page scrolled');
  }

  return (
    <div>
      {/* Your component content here */}
    </div>
  );
}

export default ScrollComponent;

In the example above, we are using the useEffect hook to add an event listener for the 'scroll' event when the component mounts. We also use the clean up function to remove the event listener when the component unmounts.
Inside the handleScroll function, you can implement the logic to handle the scroll event. In this example, we are just logging a message to the console whenever the page is scrolled.
Finally, include the ScrollComponent in your main React app component or wherever you want to use it.

By following these steps, you should now be able to handle scroll events in your React application.