Name: DOM Event Listeners in a React Component
Uploaded: 2015-06-19T12:13:43-05:00
Description: This lesson shows how to attach DOM events not provided by the React synthetic event system to a React component.

This lesson shows how to attach DOM events not provided by the React synthetic event system to a React component.

https://app.egghead.io/api/v1/lessons/react-dom-event-listeners-in-a-react-component/subtitles

DOM Event Listeners in a React Component

[00:00] React Synthetic Events System allows us to listen to all sorts of different events that may occur within our React components. However, there's no React-specific methods for listening to events that may occur outside of our components, such as Window events, or DOM events.

[00:17] To illustrate how we're going to handle that, I've created a quick little HTML page, here. The body's got a height of 5,000 pixels, so we've got a scrolling area, and I've got this ID box that's got a position of fixed, so our content will stay up here in the left-hand corner.

[00:33] We're going to go ahead and start building up our box component. That's going to have a DIV as well as a paragraph tag, and another paragraph tag. Inside of this first one, we're just going to have this state, "Width," and in our second one, we'll have this state, "Scroll."

[00:53] We're going to go and set those up in our Get Initial State, and so we're going to have Width, and that's going to be equal to window.innerwidth.

[01:06] Then our Scroll value is going to be equal to document.body.scrolltop.

[01:10] We're also going to have an update method here, this is what we're going to trigger when we listen for those events. We're simply going to set our state. We can just copy that right from here, back to those updated values of Window.innerwidth and document.body.scrolltop.

[01:32] To listen to this, we are going to say, "Component did mount," so in that life cycle phase of our component, our component is in the DOM. Now we can reach out to the DOM, so we're just going to add a window.eventlistener on the resize event, and we're going to call this ".Update," there.

[01:54] We're going to do the same thing for the scroll event, so it's going to save that. Finally, we need to render this out to our document.getelementby ID box. That's that DIV that we set up earlier with its position fixed.

[02:25] Let's go ahead and give these guys some labels here. This will be "Width," and this will be "Scroll." Save that one more time.

[02:36] We've got our width right here, which is 341, because I've actually got it pretty zoomed in, so as I zoom in, the inner width of the window is changing, and you can see that value is changing there. Additionally, if I drag it around, we can see that value is updating, and if I begin to scroll, we can see that that value is also updating. We've tapped into the events that, again, there's no React-specific way to do it, so we've just done it old-school here.

[03:03] One important thing is we want to make sure that when our component unmounts, you want to go ahead and remove those listeners. Same pattern, except we're doing a Remove Event Listener. We're going to remove this .update from the resize event, and also from the scroll event.

[03:26] The result is the same, but now when our component is unmounted, we're going to ahead and kill off those event listeners, so that they don't remain in the application and cause a memory leak.

[03:37] There you go. That's a quick look at how to deal with some of these non-React-specific events.

DOM Event Listeners in a React Component

Share this video with your friends