Media tries to update unmounted component #139

jonask94 · 2019-11-12T12:55:43Z

I’m getting the following warning from a Media-Component which implements a min-width media query:
„Can't perform a React state update on an unmounted component“.

The warning is thrown when the component is already unmounted and the user resizes the window.
It seems as if the event-listener which updates the matches-state is still alive after unmounting.

When inspecting the code I wondered why the initialize-function of Media.js is called two times (1. in constructor, 2. in componentDidMount). Doesn’t this behaviour ends up in eventListeners that will never be removed since in componentWillUnmount only the listeners created in the second call of initialize will be eleminiated?

I’m currently using react-media in version 1.10.0

edorivai · 2019-11-12T15:24:46Z

Thanks for the report. It would be really helpful if you could create a reproducible Codesandbox.
Two quick questions:

We've had a similar report a while ago: Nested media queries cause state update on unmounted component #100. Are you experiencing the same as in that issue?
Which browser are you using? Nested media queries cause state update on unmounted component #100 turned out to be Safari specific.

jonask94 · 2019-11-13T10:29:23Z

Here is a little codepen: https://codepen.io/jonask94/pen/jOOveEJ
(in the initial situation everything is fine; after pressing the button and unmounting the media component the warning is thrown when resizing the window)
It seems as if #100 relates to it, but I tested it on chrome and firefox so it is not safari specific.

edorivai · 2019-11-13T11:22:31Z

Thanks, I'll have to look into this.

Issue ReactTraining#139 was the same issue I was having when resizing a window. I was receiving an error about a possible memory leak since setState was called on an unmounted component. It seems like the `getMatches` call was taking just long enough that the component could be unmounted while it was executing. By using a `_mounted` flag, we can determine if it is safe to call `setState` and bypass it if the component is unmounted. I looked at using an abort signal, but I don't think the `matchMedia` API is robust enough for that currently.

I suspected that the issue lay in the listener being created in the constructor, and playing havoc with the `this` scope so I broke it out into its own function and passed the necessary parameters in. This succeeded in resolving the issue reported in ReactTraining#139 by removing the root of the issue instead of covering it up with my previous PR.

geegog · 2019-12-06T13:17:11Z

I have the same issue.

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method. in Media (at Contact.js:176) in Contact (created by Context.Consumer)

If I navigate to the page with the Media component and navigate away to another page then change the view to say mobile or table (in browser inspect), I get the error above.

makker · 2020-01-16T08:18:56Z

I got this warning in my app using "react-media" 1.10.0. App uses React 16.9.

Warning: Can't call setState on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application. Instead, assign to `this.state` directly or define a `state = {};` class property with the desired state in the Media component.

I'm not sure what I did before the warning fired. Sorry :/
And can't reproduce it anymore either.

mmbrtstd · 2020-01-23T11:36:28Z

I'm getting this bug as well working with NextJS. You can reproduce it easily with a default installation of NextJS.

adriankiezik · 2020-04-17T22:04:43Z

Also getting this error:

Warning: Can't call setState on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application. Instead, assign to this.state directly or define a state = {}; class property with the desired state in the Media component.

I'm not using state at my component, so I think I can ignore this error.

zjhch123 · 2020-05-21T04:39:47Z

I think the root cause is the method initialize, which is called in the constructor and the componentDidMount.

In constructor, it calls the initialize, the this.queries will be an array with some listeners. And then the component is mounted and trigger the componentDidMount, which causes the this.queries be covered by another new array without canceling the old listeners.

I'd like to fix it but I saw that someone has a PR to refactor the whole component to the functional component, and in that PR he use the useEffect to make sure every time the listeners will be canceled.

Let's wait for his PR to be merged.

edorivai · 2020-05-27T09:56:40Z

PR has been merged, it's available at react-media@next. Please let me know if you get the time to test, thanks! 🙏

zjhch123 · 2020-05-27T11:43:58Z

I can't repro it with the version @next. The issue should be resolved 😊

zjhch123 · 2020-05-28T09:04:12Z

Hey one thing needs to be pointed out.

This issue will happen again if you are in the development mode using the React.StrictMode to render the <App />. The root cause is the React needs to detect unexpected side effects, and it will call the useMedia twice using the different contexts.

I don't think it is a blocking issue since it only happens in the dev env, let's keep investigation.

GuichiZhao · 2020-09-21T10:40:03Z

The error still present when using useMedia

jhimelymendoza · 2020-10-13T14:48:46Z

The error still persists, I have version 1.10.0 installed and I still get. The PR already approved? When would this problem be solved?

index.js:1 Warning: Can't call setState on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application. Instead, assign to this.state directly or define a state = {}; class property with the desired state in the Media component.

"react": "^16.13.1",
"react-bootstrap": "^1.3.0",
"react-dom": "^16.13.1",
"react-flexbox-grid": "^2.1.2",
"react-intl": "^5.8.4",
"react-media": "^1.10.0",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.3",
"styled-components": "^5.2.0",
"typescript": "^3.8.2"

edorivai · 2020-10-13T15:09:11Z

@jhimelymendoza can you try npm install react-media@next?

jonkan · 2020-10-20T09:55:13Z

@edorivai I'm seeing the same issue using react-media@next (react-media@^2.0.0-rc.1) :/

clieee · 2020-10-20T10:15:01Z

Same here

edorivai · 2020-10-20T15:47:45Z

@jonkan @clieee @jhimelymendoza could you guys confirm whether you're seeing this with useMedia and/or <Media>?

Would also be helpful if y'all could post browser and react-media versions. 🙏

jonkan · 2020-10-21T06:09:04Z

@edorivai I'm seeing it with useMedia having react-media-2.0.0-rc.1 in Chrome 86.0, Safari 14.0 and Firefox 82.0.

Hainesy · 2021-02-10T10:08:05Z

I'm seeing it with <Media> on Chrome 88.0. Easily reproducible when resizing the window. If it helps, I'm redirecting routes when switching from desktop to mobile.

djucy · 2022-07-30T21:13:24Z

Hello, I've gotten error in Chrome 103.0:

"react_devtools_backend.js:4026 Warning: Can't call setState on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application. Instead, assign to this.state directly or define a state = {}; class property with the desired state in the Media component.".

I don't use state in this component

vinaysruban · 2022-10-03T00:57:40Z

I'm also experiencing the error on Chrome.

"Warning: Can't call setState on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application. Instead, assign to this.state directly or define a state = {}; class property with the desired state in the Media component."

This is in <React.StrictMode> though.

CalvinJamesHeath · 2024-02-26T15:42:50Z

The issue still persists.

stevenwcarter mentioned this issue Nov 21, 2019

Removing calls to setState after unmount (#139) #140

Closed

stevenwcarter mentioned this issue Nov 21, 2019

Move listener instantiation out of constructor (#139) #141

Closed

kramduckner mentioned this issue Oct 17, 2022

SF Request: Fix console warning re: react-media bloom-housing/bloom#3143

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Media tries to update unmounted component #139

Media tries to update unmounted component #139

jonask94 commented Nov 12, 2019

edorivai commented Nov 12, 2019

jonask94 commented Nov 13, 2019

edorivai commented Nov 13, 2019

geegog commented Dec 6, 2019

makker commented Jan 16, 2020

mmbrtstd commented Jan 23, 2020

adriankiezik commented Apr 17, 2020

zjhch123 commented May 21, 2020

edorivai commented May 27, 2020

zjhch123 commented May 27, 2020

zjhch123 commented May 28, 2020

GuichiZhao commented Sep 21, 2020

jhimelymendoza commented Oct 13, 2020

edorivai commented Oct 13, 2020

jonkan commented Oct 20, 2020

clieee commented Oct 20, 2020

edorivai commented Oct 20, 2020

jonkan commented Oct 21, 2020

Hainesy commented Feb 10, 2021 •

edited

Loading

djucy commented Jul 30, 2022

vinaysruban commented Oct 3, 2022 •

edited

Loading

CalvinJamesHeath commented Feb 26, 2024

Media tries to update unmounted component #139

Media tries to update unmounted component #139

Comments

jonask94 commented Nov 12, 2019

edorivai commented Nov 12, 2019

jonask94 commented Nov 13, 2019

edorivai commented Nov 13, 2019

geegog commented Dec 6, 2019

makker commented Jan 16, 2020

mmbrtstd commented Jan 23, 2020

adriankiezik commented Apr 17, 2020

zjhch123 commented May 21, 2020

edorivai commented May 27, 2020

zjhch123 commented May 27, 2020

zjhch123 commented May 28, 2020

GuichiZhao commented Sep 21, 2020

jhimelymendoza commented Oct 13, 2020

edorivai commented Oct 13, 2020

jonkan commented Oct 20, 2020

clieee commented Oct 20, 2020

edorivai commented Oct 20, 2020

jonkan commented Oct 21, 2020

Hainesy commented Feb 10, 2021 • edited Loading

djucy commented Jul 30, 2022

vinaysruban commented Oct 3, 2022 • edited Loading

CalvinJamesHeath commented Feb 26, 2024

Hainesy commented Feb 10, 2021 •

edited

Loading

vinaysruban commented Oct 3, 2022 •

edited

Loading