diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index 0327ec6576d8e..71693593569bb 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -36,6 +36,7 @@ import {
renamePathInObject,
setInObject,
utfEncodeString,
+ filterOutLocationComponentFilters,
} from 'react-devtools-shared/src/utils';
import {sessionStorageGetItem} from 'react-devtools-shared/src/storage';
import {
@@ -918,7 +919,11 @@ export function attach(
// because they are stored in localStorage within the context of the extension.
// Instead it relies on the extension to pass filters through.
if (window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ != null) {
- applyComponentFilters(window.__REACT_DEVTOOLS_COMPONENT_FILTERS__);
+ const componentFiltersWithoutLocationBasedOnes =
+ filterOutLocationComponentFilters(
+ window.__REACT_DEVTOOLS_COMPONENT_FILTERS__,
+ );
+ applyComponentFilters(componentFiltersWithoutLocationBasedOnes);
} else {
// Unfortunately this feature is not expected to work for React Native for now.
// It would be annoying for us to spam YellowBox warnings with unactionable stuff,
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js b/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js
index e19f056c8b4c9..cc53ffb3e58eb 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js
@@ -374,7 +374,9 @@ export default function ComponentsSettings(_: {}): React.Node {
): any): ComponentFilterType),
)
}>
-
+ {/* TODO: currently disabled, need find a new way of doing this
+
+ */}
diff --git a/packages/react-devtools-shared/src/utils.js b/packages/react-devtools-shared/src/utils.js
index cd66740abba05..20e736046433f 100644
--- a/packages/react-devtools-shared/src/utils.js
+++ b/packages/react-devtools-shared/src/utils.js
@@ -43,6 +43,7 @@ import {
} from './constants';
import {
ComponentFilterElementType,
+ ComponentFilterLocation,
ElementTypeHostComponent,
} from './frontend/types';
import {
@@ -339,7 +340,8 @@ export function getSavedComponentFilters(): Array {
LOCAL_STORAGE_COMPONENT_FILTER_PREFERENCES_KEY,
);
if (raw != null) {
- return JSON.parse(raw);
+ const parsedFilters: Array = JSON.parse(raw);
+ return filterOutLocationComponentFilters(parsedFilters);
}
} catch (error) {}
return getDefaultComponentFilters();
@@ -350,10 +352,27 @@ export function setSavedComponentFilters(
): void {
localStorageSetItem(
LOCAL_STORAGE_COMPONENT_FILTER_PREFERENCES_KEY,
- JSON.stringify(componentFilters),
+ JSON.stringify(filterOutLocationComponentFilters(componentFilters)),
);
}
+// Following __debugSource removal from Fiber, the new approach for finding the source location
+// of a component, represented by the Fiber, is based on lazily generating and parsing component stack frames
+// To find the original location, React DevTools will perform symbolication, source maps are required for that.
+// In order to start filtering Fibers, we need to find location for all of them, which can't be done lazily.
+// Eager symbolication can become quite expensive for large applications.
+export function filterOutLocationComponentFilters(
+ componentFilters: Array,
+): Array {
+ // This is just an additional check to preserve the previous state
+ // Filters can be stored on the backend side or in user land (in a window object)
+ if (!Array.isArray(componentFilters)) {
+ return componentFilters;
+ }
+
+ return componentFilters.filter(f => f.type !== ComponentFilterLocation);
+}
+
function parseBool(s: ?string): ?boolean {
if (s === 'true') {
return true;