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

Each time when you call **addEventListener()** method it adds the specified EventListener- compatible object to the list of event listeners for the specified event type on the EventTarget on which it is called. The event target may be an Element in a document, the Document itself, a Window, or any other object that supports events (such as XMLHttpRequest).

From that description we may find that each time when you call window.addEventListener('resize', callback) to body element object will be added in resize event listeners list.

In React more often you may see approach like that:

componentDidMount() {window.addEventListener('resize', this.handleResize)}componentWillUnmount() {window.removeEventListener('resize', this.handleResize)}

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?

1. One resize event listener
2. Each component should have possibility to listen resize event if needed and when component is unmounted it should not listen

Sounds like The Publish/Subscribe pattern may help here.

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-js_Publish/Subscribe UMD package_www.npmjs.com

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 setresizeEvent property.

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_create react redux app structure with build configurations_www.npmjs.com

Thank you for reading. Suggestions, comments, thoughts are welcome :)

If you like this, clap, follow me on medium, twitter, github share with your friends ✌️