javascript - Can't call setState inside socket.io callback React.js - Stack Overflow

admin管理员组

文章数量:1025244

I am facing the following issue:

Inside a react ponent that handles state, there is a websocket connection with socket.io. Whenever I receive some events I should do some operation and update the state of the ponent. Example:

socket.on('some event', () => {
 this.aMethod() // this method calls setState()
})

Problem is that the following message appears:

Can't perform a React state update on an unmounted ponent. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the ponentWillUnmount method.

But I am not using ponentWillUnmount method anywhere. And the ponent is not unmounted.

If I replace the aMethod with this.props.aMethod() and update the state of the parent ponent that will work ( aMethod exists in both ponents ). The problem is that this ponent is huge because it's a container and moving all state to parent and using props would cause a lot of rewrite..

That gave me an idea that there might be some problem with react routes of the app.

The parent ponent has the following routes ( conceptually ):

 <Switch>

          <Route exact path={'/user/:id'} render={(props) => <User />} />
          <Route exact path={'/users'} render={(props) => <User />} />

  </Switch>

I used render instead of ponent because I need to pass some methods as props. React and react-router-dom is at the very latest version of 16.x and 5.0.0.

Is it possible somehow react kind of "freezes" the first instance of the ponent and then url changes and I am not able to update the state anymore ? If i console.log a message inside ponentWillUnmount() i don't see it unmounting.

Any idea would be much appreciated!

Feel free to ask questions.

I am facing the following issue:

Inside a react ponent that handles state, there is a websocket connection with socket.io. Whenever I receive some events I should do some operation and update the state of the ponent. Example:

socket.on('some event', () => {
 this.aMethod() // this method calls setState()
})

Problem is that the following message appears:

Can't perform a React state update on an unmounted ponent. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the ponentWillUnmount method.

But I am not using ponentWillUnmount method anywhere. And the ponent is not unmounted.

If I replace the aMethod with this.props.aMethod() and update the state of the parent ponent that will work ( aMethod exists in both ponents ). The problem is that this ponent is huge because it's a container and moving all state to parent and using props would cause a lot of rewrite..

That gave me an idea that there might be some problem with react routes of the app.

The parent ponent has the following routes ( conceptually ):

 <Switch>

          <Route exact path={'/user/:id'} render={(props) => <User />} />
          <Route exact path={'/users'} render={(props) => <User />} />

  </Switch>

I used render instead of ponent because I need to pass some methods as props. React and react-router-dom is at the very latest version of 16.x and 5.0.0.

Is it possible somehow react kind of "freezes" the first instance of the ponent and then url changes and I am not able to update the state anymore ? If i console.log a message inside ponentWillUnmount() i don't see it unmounting.

Any idea would be much appreciated!

Feel free to ask questions.

• javascript
• reactjs
• socket.io
• react-router
• react-state

Share Improve this question Follow asked May 3, 2019 at 12:15 DrNioDrNio 1,97611 gold badge2020 silver badges2626 bronze badges 1

• kindly add full code – sarvon ks Commented May 3, 2019 at 12:17

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

React is telling you that you MUST delete the listener in ponentWillUnmount:

ponentWillUnmount() {
 socket.off('some event');
}

This is due to the fact that:

• if you add the listener in ponentDidMount you'll end up with multiple listeners
• when ponent is unmounted (on route change) "this" and its context binding does not make sense anymore, but the callback tries anyway to set the state every time the event occurs

Form react docs:

ponentWillUnmount() is invoked immediately before a ponent is unmounted and destroyed. Perform any necessary cleanup in this method, such as invalidating timers, canceling network requests, or cleaning up any subscriptions that were created in ponentDidMount().

Ref: https://reactjs/docs/react-ponent.html?utm_source=caibaojian.#ponentwillunmount

Another resource to better understand the issue:

https://advancedweb.hu/2016/01/05/global-listener-patterns-in-react/

I am facing the following issue:

Inside a react ponent that handles state, there is a websocket connection with socket.io. Whenever I receive some events I should do some operation and update the state of the ponent. Example:

socket.on('some event', () => {
 this.aMethod() // this method calls setState()
})

Problem is that the following message appears:

Can't perform a React state update on an unmounted ponent. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the ponentWillUnmount method.

But I am not using ponentWillUnmount method anywhere. And the ponent is not unmounted.

If I replace the aMethod with this.props.aMethod() and update the state of the parent ponent that will work ( aMethod exists in both ponents ). The problem is that this ponent is huge because it's a container and moving all state to parent and using props would cause a lot of rewrite..

That gave me an idea that there might be some problem with react routes of the app.

The parent ponent has the following routes ( conceptually ):

 <Switch>

          <Route exact path={'/user/:id'} render={(props) => <User />} />
          <Route exact path={'/users'} render={(props) => <User />} />

  </Switch>

I used render instead of ponent because I need to pass some methods as props. React and react-router-dom is at the very latest version of 16.x and 5.0.0.

Is it possible somehow react kind of "freezes" the first instance of the ponent and then url changes and I am not able to update the state anymore ? If i console.log a message inside ponentWillUnmount() i don't see it unmounting.

Any idea would be much appreciated!

Feel free to ask questions.

I am facing the following issue:

Inside a react ponent that handles state, there is a websocket connection with socket.io. Whenever I receive some events I should do some operation and update the state of the ponent. Example:

socket.on('some event', () => {
 this.aMethod() // this method calls setState()
})

Problem is that the following message appears:

Can't perform a React state update on an unmounted ponent. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the ponentWillUnmount method.

But I am not using ponentWillUnmount method anywhere. And the ponent is not unmounted.

If I replace the aMethod with this.props.aMethod() and update the state of the parent ponent that will work ( aMethod exists in both ponents ). The problem is that this ponent is huge because it's a container and moving all state to parent and using props would cause a lot of rewrite..

That gave me an idea that there might be some problem with react routes of the app.

The parent ponent has the following routes ( conceptually ):

 <Switch>

          <Route exact path={'/user/:id'} render={(props) => <User />} />
          <Route exact path={'/users'} render={(props) => <User />} />

  </Switch>

I used render instead of ponent because I need to pass some methods as props. React and react-router-dom is at the very latest version of 16.x and 5.0.0.

Is it possible somehow react kind of "freezes" the first instance of the ponent and then url changes and I am not able to update the state anymore ? If i console.log a message inside ponentWillUnmount() i don't see it unmounting.

Any idea would be much appreciated!

Feel free to ask questions.

• javascript
• reactjs
• socket.io
• react-router
• react-state

Share Improve this question Follow asked May 3, 2019 at 12:15 DrNioDrNio 1,97611 gold badge2020 silver badges2626 bronze badges 1

• kindly add full code – sarvon ks Commented May 3, 2019 at 12:17

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

React is telling you that you MUST delete the listener in ponentWillUnmount:

ponentWillUnmount() {
 socket.off('some event');
}

This is due to the fact that:

• if you add the listener in ponentDidMount you'll end up with multiple listeners
• when ponent is unmounted (on route change) "this" and its context binding does not make sense anymore, but the callback tries anyway to set the state every time the event occurs

Form react docs:

ponentWillUnmount() is invoked immediately before a ponent is unmounted and destroyed. Perform any necessary cleanup in this method, such as invalidating timers, canceling network requests, or cleaning up any subscriptions that were created in ponentDidMount().

Ref: https://reactjs/docs/react-ponent.html?utm_source=caibaojian.#ponentwillunmount

Another resource to better understand the issue:

https://advancedweb.hu/2016/01/05/global-listener-patterns-in-react/

本文标签： javascriptCan39t call setState inside socketio callback ReactjsStack Overflow