0

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.

5
  • 1
    Can you show where this EventEmitter is being used in your React code? Commented Nov 13, 2020 at 15:26
  • @CertainPerformance Updated the post :) ty for taking the time to reply.
    – msqar
    Commented Nov 13, 2020 at 16:04
  • How does it has to do with strict mode? Do you have reproducible example? How to create a Minimal, Reproducible Example Commented Nov 13, 2020 at 16:04
  • @DennisVash Dev version automatically runs in strict mode. Commented Nov 13, 2020 at 16:05
  • @DennisVash After googling, It seems that this is related to StrictMode, according to the docs, it's normal for this to render twice just to make sure components are pure, it helps debugging. Hence why my components are being initialized twice, even though im using them only once within App.js. Just added a breakpoint within my constructor and it goes 2 times. Hence the double subscription to the event. So when I add an item, it will add the same item twice.
    – msqar
    Commented Nov 13, 2020 at 16:06

1 Answer 1

2

When you subscribe in the constructor, it invoked twice, try to subscribe in the component's lifecycle where it supposed to be done.

componentDidMount = () => {
  EventEmitter.subscribe(Events.REMOVED_ITEM_EVENT, this.onItemRemoved);
};

You even have such anti-pattern example in the docs:

class TopLevelRoute extends React.Component {
  constructor(props) {
    super(props);

    SharedApplicationState.recordEvent('ExampleComponent');
  }
}

At first glance, this code might not seem problematic. But if SharedApplicationState.recordEvent is not idempotent, then instantiating this component multiple times could lead to an invalid application state. This sort of subtle bug might not manifest during development, or it might do so inconsistently and so be overlooked.

1
  • 1
    You were ABSOLUTELY right, can't believe it was because of this. Had to add it in the componentDidMount, i thought it would be called twice as in constructor, that's why i didn't try that out. Thanks man!
    – msqar
    Commented Nov 13, 2020 at 16:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.