When you define a component using an ES6 class, a common pattern is for an event Why Do I Need It? If you find yourself adding a lot of event listeners using useEffect you might consider moving that logic to a custom hook. Our useEffect hook only runs once on component mount, and adds an event listener to the window resize event.

React hooks were introduced in react 16.8, and whilst it is not trying to replace using classes it does make it …

Photo by Thomas Tastet on Unsplash. Instead, just provide a listener when the element is initially rendered. React has it’s own method, onScroll, which can be called on any component when the scroll event is fired. The event listener sets our state variable to the new size of the viewport. When using React, you generally don’t need to call addEventListener to add listeners to a DOM element after it is created. See it in action in the CodeSandbox demo. Today we are going to learn, how to use JavaScript scroll event listener to track browser scroll position using hooks — React not so old new feature. Finally, we return a function to be called on unmount which will tidy up and remove the event listener. Scroll Events in React. Tracking viewport/element scroll position could be vastly useful and for the most part, the only way to enrich your web project with cool dynamic features, like: 2 min read. Using this onScroll method we can call a function as a result of a user scrolling. Custom React hook for listening to scroll events. When using react hooks with addEventListener, we can get this down to ONE LINE OF CODE, that is reusable, maintainable and most importantly safer to use. GitHub Gist: instantly share code, notes, and snippets. In the recipe below we create a useEventListener hook that handles checking if addEventListener is supported, adding the event listener, and removal on cleanup.

React also gives you tools to safely add and remove a Window event listener when a component mounts and unmounts from the Document Object Model (DOM), giving you control over Window events while preventing memory leaks from improperly removed listeners. When a user scrolls a DOM scroll event is fired, an event which is built into ever browser by default. A couple of weeks ago while I was working on a small React project I … In this tutorial, you’ll learn how to handle events in React.