') + ')', 'gi'); if (regex.test(text)) { found = true; var frag = document.createDocumentFragment(); var parts = text.split(regex); parts.forEach(function(part, i) { if (i % 2 === 0) { frag.appendChild(document.createTextNode(part)); } else { var span = document.createElement('span'); span.className = 'userscript-highlight'; span.textContent = part; frag.appendChild(span); } }); node.parentNode.replaceChild(frag, node); } }); } else if (node.nodeType === 1 && node.childNodes) { // element var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT']; if (!skipTags.includes(node.tagName)) { Array.from(node.childNodes).forEach(highlight); } } } highlight(document.body); // Re-highlight on dynamic content var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1 || node.nodeType === 3) highlight(node); }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Strip utm_, fbclid, gclid, etc. from all links on page (function() { var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content', 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid', 'ref', 'ref_src', 'source', 'medium', 'campaign']; function cleanUrl(url) { try { var u = new URL(url, window.location.origin); var changed = false; trackingParams.forEach(function(p) { if (u.searchParams.has(p)) { u.searchParams.delete(p); changed = true; } }); return changed ? u.toString() : url; } catch (e) { return url; } } function cleanLinks() { document.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } cleanLinks(); var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1) { if (node.tagName === 'A') cleanLinks(); node.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Auto-enable theater mode on YouTube (function() { function tryTheater() { var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]'); if (btn && !btn.classList.contains('activated')) { btn.click(); } } // Try immediately tryTheater(); // Try after navigation (SPA) var lastUrl = location.href; setInterval(function() { if (location.href !== lastUrl) { lastUrl = location.href; setTimeout(tryTheater, 500); } }, 1000); // Also try on player load var observer = new MutationObserver(tryTheater); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Remove or un-stick sticky/fixed headers that block content (function() { function unstick() { document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) { if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') { el.style.position = 'static'; el.style.top = 'auto'; el.style.zIndex = 'auto'; } }); } unstick(); var observer = new MutationObserver(unstick); observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] }); })(); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); })(); RNTesterIntegrationTests can fail due to the warning "Can't call setState (or forceUpdate) on an unmounted component." by tom-un · Pull Request #24984 · react/react-native · GitHub
Skip to content

RNTesterIntegrationTests can fail due to the warning "Can't call setState (or forceUpdate) on an unmounted component." - #24984

Closed
tom-un wants to merge 2 commits into
react:masterfrom
tom-un:tomun/FixRNTesterAppAsyncStorageRace
Closed

RNTesterIntegrationTests can fail due to the warning "Can't call setState (or forceUpdate) on an unmounted component."#24984
tom-un wants to merge 2 commits into
react:masterfrom
tom-un:tomun/FixRNTesterAppAsyncStorageRace

Conversation

@tom-un

@tom-untom-un commented May 21, 2019

Copy link
Copy Markdown
Contributor

Summary

When running the RNTesterIntegrationTests from the XCode IDE or xcodebuild command line, its possible for tests to intermittently fail due to the warning 'Warning: Can\'t call setState (or forceUpdate) 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.%s', '\n in RNTesterApp. .

A setState() call could happen in the AsyncStorage callback after the component had unmounted: presumably because the test ran and concluded before AsyncStorage returned. Changed RNTesterApp.ios.js to maintain a _mounted field that is set and cleared in componentDidMount() and componentWillUnmount() and refrain from calling setState() if the flag is false.

Changelog

[iOS] [Fixed] - Fixed RNTesterApp to not call setState() after the component has been unmounted.

Test Plan

All tests pass.

I have already made the same fix in the Microsoft fork of react-native: microsoft#18. The Microsoft Azure DevOps hosted CI loops also run RNTesterIntegrationTests. Before this fix we had only about an 86% pass rate and most of the failures were due to this warning. After this fix (and others) we are at a 98% pass rate.

tom-un added 2 commits May 21, 2019 10:53
@tom-un
Changed RNTesterApp.ios.js to maintain a _mounted field that is set a…
3df2a0e
…nd cleared in componentDidMount() and componentWillUnmount() and refrain from calling setState() if the flag is false
Changed RNTesterApp.ios.js to maintain a _mounted field that is set and cleared in componentDidMount() and componentWillUnmount() and refrain from calling setState() if the flag is false.
@tom-un
Linted code
4d8977c
@facebook-github-bot

facebook-github-bot commented May 21, 2019

Copy link
Copy Markdown
Contributor

Thank you for your pull request and welcome to our community. We require contributors to sign our Contributor License Agreement, and we don't seem to have you on file. In order for us to review and merge your code, please sign up at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need the corporate CLA signed.

If you have received this in error or have any questions, please contact us at cla@fb.com. Thanks!

@hramoshramos added p: Microsoft Partner: Microsoft Partner labels May 21, 2019
@hramos

hramos commented May 21, 2019

Copy link
Copy Markdown
Contributor

I emailed CLA@ to see if they can add you to the Microsoft CLA.

@react-native-botreact-native-bot added the No CLA Authors need to sign the CLA before a PR can be reviewed. label May 22, 2019
@facebook-github-botfacebook-github-bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label May 22, 2019
@facebook-github-bot

facebook-github-bot commented May 22, 2019

Copy link
Copy Markdown
Contributor

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks!

@react-native-botreact-native-bot removed the No CLA Authors need to sign the CLA before a PR can be reviewed. label May 22, 2019
facebook-github-bot
facebook-github-bot approved these changes May 22, 2019
View reviewed changes

@facebook-github-botfacebook-github-bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@hramos is landing this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

@react-native-bot

react-native-bot commented May 22, 2019

Copy link
Copy Markdown
Collaborator

This pull request was successfully merged by @tom-un in 6671165.

When will my fix make it into a release? | Upcoming Releases

@react-native-botreact-native-bot added the Merged This PR has been merged. label May 22, 2019
vovkasm pushed a commit to vovkasm/react-native that referenced this pull request Aug 12, 2019
@tom-un@vovkasm
RNTesterIntegrationTests can fail due to the warning "Can't call setS…
844f6d4
…tate (or forceUpdate) on an unmounted component." (react#24984)
Summary:
When running the RNTesterIntegrationTests from the XCode IDE or xcodebuild command line, its possible for tests to intermittently fail due to the warning `'Warning: Can\'t call setState (or forceUpdate) 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.%s', '\n in RNTesterApp.` .
A setState() call could happen in the AsyncStorage callback after the component had unmounted: presumably because the test ran and concluded before AsyncStorage returned. Changed RNTesterApp.ios.js to maintain a _mounted field that is set and cleared in componentDidMount() and componentWillUnmount() and refrain from calling setState() if the flag is false.
## Changelog
[iOS] [Fixed] - Fixed RNTesterApp to not call setState() after the component has been unmounted.
Pull Request resolved: react#24984
Differential Revision: D15447898
Pulled By: hramos
fbshipit-source-id: b01bc0a40a4f4d548aca0a4bb891ba3f4c8d0612
(cherry picked from commit 6671165)
M-i-k-e-l pushed a commit to M-i-k-e-l/react-native that referenced this pull request Mar 10, 2020
@tom-un@M-i-k-e-l
RNTesterIntegrationTests can fail due to the warning "Can't call setS…
91daed5
…tate (or forceUpdate) on an unmounted component." (react#24984)
Summary:
When running the RNTesterIntegrationTests from the XCode IDE or xcodebuild command line, its possible for tests to intermittently fail due to the warning `'Warning: Can\'t call setState (or forceUpdate) 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.%s', '\n in RNTesterApp.` .
A setState() call could happen in the AsyncStorage callback after the component had unmounted: presumably because the test ran and concluded before AsyncStorage returned. Changed RNTesterApp.ios.js to maintain a _mounted field that is set and cleared in componentDidMount() and componentWillUnmount() and refrain from calling setState() if the flag is false.
## Changelog
[iOS] [Fixed] - Fixed RNTesterApp to not call setState() after the component has been unmounted.
Pull Request resolved: react#24984
Differential Revision: D15447898
Pulled By: hramos
fbshipit-source-id: b01bc0a40a4f4d548aca0a4bb891ba3f4c8d0612
@tom-un
tom-un deleted the tomun/FixRNTesterAppAsyncStorageRace branch May 8, 2020 21:48
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

1 more reviewer
@facebook-github-botfacebook-github-botfacebook-github-bot approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

BugCLA SignedThis label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.MergedThis PR has been merged.p: MicrosoftPartner: MicrosoftPartnerPlatform: iOSiOS applications.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@tom-un@facebook-github-bot@hramos@react-native-bot