Each time when you call method it adds the specified - compatible object to the list of event listeners for the specified event type on the on which it is called. The event target may be an in a document, the itself, a , or any other object that supports events (such as ). **addEventListener()** EventListener EventTarget Element Document Window XMLHttpRequest From that description we may find that each time when you call to body element object will be added in resize event listeners list. window.addEventListener('resize', callback) In React more often you may see approach like that: componentDidMount() {window.addEventListener('resize', .handleResize)}componentWillUnmount() {window.removeEventListener('resize', .handleResize)} this this It works, but as we mentioned before, resize events list will grow up as many times as you reuse that component. Eventually, you will have picture like that: Chrome DevTools a flame chart of activity on the main thread. Looks not good I would say. What may it cause you? Firstly, it is hard to debug and the code is not scalable. What if you need to do some stuff when each resizes event is firing? Will be hard, right? You need to go to each component where resize event is listening and make changes. Secondly, it may cause you a bad performance. Let’s improve What do we need to have? One resize event listener Each component should have possibility to listen resize event if needed and when component is unmounted it should not listen Sounds like pattern may help here. The Publish/Subscribe This is where the objects in a system may subscribe to other objects and be notified by them when an event of interest occurs. ~ Addy Osmani Let’s create an object where we can subscribe, unsubscribe and publish: Have a look at Publish/Subscribe UMD package for better usage: _Publish/Subscribe UMD package_www.npmjs.com publish-subscribe-js Then, we need to have a place where we listen resize event and publish to each subscriber when the event is fired. First, let’s create a global object which we are going to share across application and set property. resizeEvent Listen to window events when DOM is ready. So, we created subscriber/publisher, listen resize event in one place for whole application and publish to each subscriber when the event is fired. What is left? Right, let’s subscribe to the event from a component. That’s it :) You may use subPub for each window event listener. In result we have clear window resize event listeners list and code are more scalable. Find full code example here (page Resize_SubPub) : _create react redux app structure with build configurations_www.npmjs.com create-react-redux-app-structure Thank you for reading. Suggestions, comments, thoughts are welcome :) ✌️ If you like this, clap, follow me on medium , twitter , github share with your friends

Too Long; Didn't Read

Making security fun one episode at a time

Do you still register window event listeners in each component? (React in example)

Too Long; Didn't Read

Vasyl Stokolosa

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Do you still register window event listeners in each component? (React in example)

Too Long; Didn't Read

Vasyl Stokolosa

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES