i want to make off method from socket.io client to remove all match running listeners from all react ponents Because currently i'm listening to a same event on two different ponent , both are in ponentDidMount,

Board.js

 socket.on('achievement', (data) => {
                const updateAchievement= [data, ...this.state.getAchievements];
                this.setState({
                    recentAchievements: this.state.recentAchievements.concat(data),
                    getAchievements: updateAchievement
                });
            });

Dashboard.js

 socket.on('achievement', (data) => {
                const updateAchievement= [data, ...this.state.getAchievements];
                this.setState({
                    recentAchievements: this.state.recentAchievements.concat(data),
                    getAchievements: updateAchievement
                });
            });

Currently if the end-user turn off listening to the event while on DashBoard.js , the Board.js is still actively receiving data which i don't want. The board.js ponent is always on the view that's why i can see the data still ing.

How i unsubscribe

DashBoard.js

ponentWillUnmount(){
            socket.off("achievement");
     }

Like i said above, the Board ponent is always in the view and i can still see data ing in.

How can i stop this?

i want to make off method from socket.io client to remove all match running listeners from all react ponents Because currently i'm listening to a same event on two different ponent , both are in ponentDidMount,

Board.js

 socket.on('achievement', (data) => {
                const updateAchievement= [data, ...this.state.getAchievements];
                this.setState({
                    recentAchievements: this.state.recentAchievements.concat(data),
                    getAchievements: updateAchievement
                });
            });

Dashboard.js

 socket.on('achievement', (data) => {
                const updateAchievement= [data, ...this.state.getAchievements];
                this.setState({
                    recentAchievements: this.state.recentAchievements.concat(data),
                    getAchievements: updateAchievement
                });
            });

Currently if the end-user turn off listening to the event while on DashBoard.js , the Board.js is still actively receiving data which i don't want. The board.js ponent is always on the view that's why i can see the data still ing.

How i unsubscribe

DashBoard.js

ponentWillUnmount(){
            socket.off("achievement");
     }

Like i said above, the Board ponent is always in the view and i can still see data ing in.

How can i stop this?

• javascript
• reactjs
• socket.io

Share Follow edited Aug 26, 2018 at 12:55 JEEZSUSCRIZE asked Aug 26, 2018 at 12:27 JEEZSUSCRIZEJEEZSUSCRIZE 18422 silver badges1616 bronze badges 21

• Where and how do you unsubscribe to the handlers? – Patrick Hollweck Commented Aug 26, 2018 at 12:36
• @heydude101 You need to provide the handler that you want to unsubscribe. Just 'achievement' is not enough to provide to off() as there are multiple handlers listening to that event. See my answer. – trixn Commented Aug 26, 2018 at 12:45
• 1 Just like @trinx said in his answer, You are not using the correct signature for the function. The correct one is: socket.off(eventName, functionTo UnsubscribeFrom) Since you are not supplying the second argument no handler gets removed – Patrick Hollweck Commented Aug 26, 2018 at 12:46
• I'm not really using any function i just put the listener inside didMount, but i followed trixn answer and still doing the same thing,. – JEEZSUSCRIZE Commented Aug 26, 2018 at 12:51
• @heydude101 It is not clear what you are asking for. You want to remove all listeners on a users action? – trixn Commented Aug 26, 2018 at 12:53

 |  Show 16 more ments

1 Answer 1

Sorted by: Reset to default 6

Just use the ponentWillUnmout() lifecycle method to call socket.off() with the handler. Note that off() requires the previously subscribed handler to be passed as the second argument:

class MyComponent extends Component {
    updateAchievement = data => {
        this.setState(prevState => ({
                    recentAchievements: [...prevState.recentAchievements, data],
                    getAchievements: [data, ...prevState.getAchievements]
        }));
    }

    ponentDidMount() {
       socket.on('achievement', this.updateAchievement);
    }

    ponentWillUnmount() {
       socket.off('achievement', this.updateAchievement);
    }

    // ...
}

Note that you should not use this.state when updating the state. Always use the version of setState that takes a function where the first argument is the previous state and update based on that.