I have an EventEmitter in my ReactJS app that has dispatch & subscribe functions for overall component communication within my site. React StrictMode is causing of course, my views to re-render twice, including its constructors. Within the Home view, I'm subscribing to an specific event attached to the corresponding callback, so in development mode, this event is being triggered twice. It's pretty annoying.
This is the EventEmitter:
export const EventEmitter = {
events: {},
dispatch(event, data) {
if (!this.events[event]) return;
this.events[event].forEach(callback => callback(data));
},
subscribe(event, callback) {
if (!this.events[event]) this.events[event] = [];
this.events[event].push(callback);
}
}
I know in Production this won't happen but, it's frustrating to have this happening while I'm coding. What should I do? Get rid of StrictMode?
EDIT: This is how I'm using the EventEmitter in Home view:
import { EventEmitter } from '../../services/event-emitter';
import { Events } from '../../services/index';
class HomeView extends React.Component {
constructor(props) {
super(props);
this.state = {
items: []
}
EventEmitter.subscribe(Events.REMOVED_ITEM_EVENT, this.onItemRemoved);
}
...
}
Thanks.