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
EventTargeton which it is called. The event target may be an
Elementin a document, the
Window, or any other object that supports events (such as
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:
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.
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 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:
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
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 configurationswww.npmjs.com
Thank you for reading. Suggestions, comments, thoughts are welcome :)