React.js best practice regarding listening to window events from components

Question

I am animating several React.js components based on their position in the viewport. If the component is in the viewport, animate the opacity to 1, if it\'s not in the viewpo

Answer 1

Here it is in functional style with the useEffect hook:

  let onScroll = (event) => {
    console.log("scrolling");
  }
  useEffect(() => {
    if (window){
      window.addEventListener('scroll', onScroll);
    }
    return () => {
      window.removeEventListener('scroll', onScroll);
    }
  }, []);