Skip to content

feature[REMOVED][devtools]: turn off / hide location based component filters#28417

Merged
hoxyq merged 1 commit into
react:mainfrom
hoxyq:devtools/turn-off-location-based-component-filters
Feb 22, 2024
Merged

feature[REMOVED][devtools]: turn off / hide location based component filters#28417
hoxyq merged 1 commit into
react:mainfrom
hoxyq:devtools/turn-off-location-based-component-filters

Conversation

@hoxyq

@hoxyq hoxyq commented Feb 22, 2024

Copy link
Copy Markdown
Contributor

Following #28265, this should disable location-based component filters.

// 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.

I am planning to publish a patch version of RDT soon, so I think its better to remove this feature, instead of shipping it in a broken state.

The reason for filtering out these filters is a potential cases, where we load filters from the backend (like in RN, where we storing some settings on device), or these filters can be stored in user land (window.__REACT_DEVTOOLS_COMPONENT_FILTERS__).

Explicitly tested the case when:

  1. Load current RDT extension, add location-based component filter
  2. Reload the page and observe that previously created component filter is preserved
  3. Re-load RDT extension with these changes, observe there is no previously created component filter and user can't create a new location-based filter
  4. Reload RDT extension without these changes, no location-based filters saved, user can create location-based filters

@facebook-github-bot facebook-github-bot added CLA Signed React Core Team Opened by a member of the React Core Team labels Feb 22, 2024

@huntie huntie left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

LGTM 👍🏻 One thing is I would prefix the commit as "feature", if using a scoped commit msg format.

@hoxyq hoxyq force-pushed the devtools/turn-off-location-based-component-filters branch from 0ee4100 to a5006f8 Compare February 22, 2024 16:57
@hoxyq hoxyq changed the title refactor[devtools]: turn off / hide location based component filters feature[REMOVED][devtools]: turn off / hide location based component filters Feb 22, 2024
@hoxyq hoxyq merged commit d4cac3f into react:main Feb 22, 2024
@hoxyq hoxyq deleted the devtools/turn-off-location-based-component-filters branch February 22, 2024 16:59
hoxyq added a commit that referenced this pull request Feb 22, 2024
Full list of changes (not a public CHANGELOG):

* feature[REMOVED][devtools]: turn off / hide location based component
filters ([hoxyq](https://github.com/hoxyq) in
[#28417](#28417))
* Add useSyncExternalStore and useTransition to getPrimitiveStackCache
([jamesbvaughan](https://github.com/jamesbvaughan) in
[#28399](#28399))
* chore[devtools]: use react-window from npm and bump
react-virtualized-auto-sizer to ^1.0.23
([hoxyq](https://github.com/hoxyq) in
[#28408](#28408))
* Pass ref as normal prop ([acdlite](https://github.com/acdlite) in
[#28348](#28348))
* Combine createElement and JSX modules
([acdlite](https://github.com/acdlite) in
[#28320](#28320))
* [Debug Tools] Always use includeHooksSource option
([sebmarkbage](https://github.com/sebmarkbage) in
[#28309](#28309))
* Revert "[Tests] Reset modules by default"
([acdlite](https://github.com/acdlite) in
[#28318](#28318))
* Switch <Context> to mean <Context.Provider>
([gaearon](https://github.com/gaearon) in
[#28226](#28226))
* [Debug Tools] Introspect Promises in use()
([sebmarkbage](https://github.com/sebmarkbage) in
[#28297](#28297))
* fix[devtools/useModalDismissSignal]: use getRootNode for shadow root
case support ([hoxyq](https://github.com/hoxyq) in
[#28145](#28145))
* fix: define IS_ACT_ENVIRONMENT global for tests with concurrent mode
and synchronous act ([hoxyq](https://github.com/hoxyq) in
[#28296](#28296))
* chore: gate legacy apis for react-devtools-shell
([hoxyq](https://github.com/hoxyq) in
[#28273](#28273))
* DevTools: Add support for use(Context)
([eps1lon](https://github.com/eps1lon) in
[#28233](#28233))
* Remove __self and __source location from elements
([sebmarkbage](https://github.com/sebmarkbage) in
[#28265](#28265))
* chore: use versioned render in inspectedElement test
([hoxyq](https://github.com/hoxyq) in
[#28246](#28246))
* chore: use versioned render in TimelineProfiler test and gate some for
legacy rendering ([hoxyq](https://github.com/hoxyq) in
[#28218](#28218))
* [Tests] Reset modules by default
([rickhanlonii](https://github.com/rickhanlonii) in
[#28254](#28254))
* chore: use versioned render in preprocessData test and gate some for …
([hoxyq](https://github.com/hoxyq) in
[#28219](#28219))
* chore: use versioned render in storeStressSync test and gate them for
legacy rendering ([hoxyq](https://github.com/hoxyq) in
[#28216](#28216))
* Patch devtools before running useMemo function in strict mode
([gsathya](https://github.com/gsathya) in
[#28249](#28249))
* chore: use versioned render in storeComponentFilters test
([hoxyq](https://github.com/hoxyq) in
[#28241](#28241))
* chore: use versioned render in profilerContext test
([hoxyq](https://github.com/hoxyq) in
[#28243](#28243))
* chore: use versioned render in profilingCommitTreeBuilder test and
gate some for legacy rendering ([hoxyq](https://github.com/hoxyq) in
[#28236](#28236))
* chore: use versioned render in profilingHostRoot test and gate some
for legacy rendering ([hoxyq](https://github.com/hoxyq) in
[#28237](#28237))
* chore: use versioned render in profilingCache test
([hoxyq](https://github.com/hoxyq) in
[#28242](#28242))
* chore: use versioned render in ownersListContext test
([hoxyq](https://github.com/hoxyq) in
[#28240](#28240))
* chore: use versioned render in editing test
([hoxyq](https://github.com/hoxyq) in
[#28239](#28239))
* chore: use versioned render in treeContext test
([hoxyq](https://github.com/hoxyq) in
[#28245](#28245))
* chore: use versioned render in store test
([hoxyq](https://github.com/hoxyq) in
[#28244](#28244))
* chore: use versioned render in profilerStore test
([hoxyq](https://github.com/hoxyq) in
[#28238](#28238))
* chore: use versioned render in profilingCharts test
([hoxyq](https://github.com/hoxyq) in
[#28235](#28235))
* chore: use versioned render in profilerChangeDescriptions test
([hoxyq](https://github.com/hoxyq) in
[#28221](#28221))
* chore: use versioned render in storeOwners test
([hoxyq](https://github.com/hoxyq) in
[#28215](#28215))
* chore: use versioned render in componentStacks test
([hoxyq](https://github.com/hoxyq) in
[#28214](#28214))
* chore: use versioned render in console test
([hoxyq](https://github.com/hoxyq) in
[#28213](#28213))
* chore: use versioned render in useEditableValue test
([hoxyq](https://github.com/hoxyq) in
[#28212](#28212))
* chore: use versioned render in FastRefreshDevToolsIntegration test
([hoxyq](https://github.com/hoxyq) in
[#28211](#28211))
* chore: add versioned render implementation for DevTools tests
([hoxyq](https://github.com/hoxyq) in
[#28210](#28210))
* chore: add single versioned implementation of act for DevTools tests
([hoxyq](https://github.com/hoxyq) in
[#28186](#28186))
* DevTools: Add support for useFormState
([eps1lon](https://github.com/eps1lon) in
[#28232](#28232))
* DevTools: Add support for useOptimistic Hook
([eps1lon](https://github.com/eps1lon) in
[#27982](#27982))
* Add stable React.act export ([acdlite](https://github.com/acdlite) in
[#28160](#28160))
* [flow] upgrade to 0.225.1 ([kassens](https://github.com/kassens) in
[#27871](#27871))
* fix[devtools/e2e]: add fallback for act in integration tests
([hoxyq](https://github.com/hoxyq) in
[#27842](#27842))
* Add stable concurrent option to react-test-renderer
([jackpope](https://github.com/jackpope) in
[#27804](#27804))
* Update act references in tests ([gnoff](https://github.com/gnoff) in
[#27805](#27805))
* Flow: make more objects exact ([kassens](https://github.com/kassens)
in [#27790](#27790))
EdisonVan pushed a commit to EdisonVan/react that referenced this pull request Apr 15, 2024
…filters (react#28417)

Following react#28265, this should
disable location-based component filters.

```
// 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.
```

I am planning to publish a patch version of RDT soon, so I think its
better to remove this feature, instead of shipping it in a broken state.

The reason for filtering out these filters is a potential cases, where
we load filters from the backend (like in RN, where we storing some
settings on device), or these filters can be stored in user land
(`window.__REACT_DEVTOOLS_COMPONENT_FILTERS__`).

Explicitly tested the case when:
1. Load current RDT extension, add location-based component filter
2. Reload the page and observe that previously created component filter
is preserved
3. Re-load RDT extension with these changes, observe there is no
previously created component filter and user can't create a new
location-based filter
4. Reload RDT extension without these changes, no location-based filters
saved, user can create location-based filters
EdisonVan pushed a commit to EdisonVan/react that referenced this pull request Apr 15, 2024
Full list of changes (not a public CHANGELOG):

* feature[REMOVED][devtools]: turn off / hide location based component
filters ([hoxyq](https://github.com/hoxyq) in
[react#28417](react#28417))
* Add useSyncExternalStore and useTransition to getPrimitiveStackCache
([jamesbvaughan](https://github.com/jamesbvaughan) in
[react#28399](react#28399))
* chore[devtools]: use react-window from npm and bump
react-virtualized-auto-sizer to ^1.0.23
([hoxyq](https://github.com/hoxyq) in
[react#28408](react#28408))
* Pass ref as normal prop ([acdlite](https://github.com/acdlite) in
[react#28348](react#28348))
* Combine createElement and JSX modules
([acdlite](https://github.com/acdlite) in
[react#28320](react#28320))
* [Debug Tools] Always use includeHooksSource option
([sebmarkbage](https://github.com/sebmarkbage) in
[react#28309](react#28309))
* Revert "[Tests] Reset modules by default"
([acdlite](https://github.com/acdlite) in
[react#28318](react#28318))
* Switch <Context> to mean <Context.Provider>
([gaearon](https://github.com/gaearon) in
[react#28226](react#28226))
* [Debug Tools] Introspect Promises in use()
([sebmarkbage](https://github.com/sebmarkbage) in
[react#28297](react#28297))
* fix[devtools/useModalDismissSignal]: use getRootNode for shadow root
case support ([hoxyq](https://github.com/hoxyq) in
[react#28145](react#28145))
* fix: define IS_ACT_ENVIRONMENT global for tests with concurrent mode
and synchronous act ([hoxyq](https://github.com/hoxyq) in
[react#28296](react#28296))
* chore: gate legacy apis for react-devtools-shell
([hoxyq](https://github.com/hoxyq) in
[react#28273](react#28273))
* DevTools: Add support for use(Context)
([eps1lon](https://github.com/eps1lon) in
[react#28233](react#28233))
* Remove __self and __source location from elements
([sebmarkbage](https://github.com/sebmarkbage) in
[react#28265](react#28265))
* chore: use versioned render in inspectedElement test
([hoxyq](https://github.com/hoxyq) in
[react#28246](react#28246))
* chore: use versioned render in TimelineProfiler test and gate some for
legacy rendering ([hoxyq](https://github.com/hoxyq) in
[react#28218](react#28218))
* [Tests] Reset modules by default
([rickhanlonii](https://github.com/rickhanlonii) in
[react#28254](react#28254))
* chore: use versioned render in preprocessData test and gate some for …
([hoxyq](https://github.com/hoxyq) in
[react#28219](react#28219))
* chore: use versioned render in storeStressSync test and gate them for
legacy rendering ([hoxyq](https://github.com/hoxyq) in
[react#28216](react#28216))
* Patch devtools before running useMemo function in strict mode
([gsathya](https://github.com/gsathya) in
[react#28249](react#28249))
* chore: use versioned render in storeComponentFilters test
([hoxyq](https://github.com/hoxyq) in
[react#28241](react#28241))
* chore: use versioned render in profilerContext test
([hoxyq](https://github.com/hoxyq) in
[react#28243](react#28243))
* chore: use versioned render in profilingCommitTreeBuilder test and
gate some for legacy rendering ([hoxyq](https://github.com/hoxyq) in
[react#28236](react#28236))
* chore: use versioned render in profilingHostRoot test and gate some
for legacy rendering ([hoxyq](https://github.com/hoxyq) in
[react#28237](react#28237))
* chore: use versioned render in profilingCache test
([hoxyq](https://github.com/hoxyq) in
[react#28242](react#28242))
* chore: use versioned render in ownersListContext test
([hoxyq](https://github.com/hoxyq) in
[react#28240](react#28240))
* chore: use versioned render in editing test
([hoxyq](https://github.com/hoxyq) in
[react#28239](react#28239))
* chore: use versioned render in treeContext test
([hoxyq](https://github.com/hoxyq) in
[react#28245](react#28245))
* chore: use versioned render in store test
([hoxyq](https://github.com/hoxyq) in
[react#28244](react#28244))
* chore: use versioned render in profilerStore test
([hoxyq](https://github.com/hoxyq) in
[react#28238](react#28238))
* chore: use versioned render in profilingCharts test
([hoxyq](https://github.com/hoxyq) in
[react#28235](react#28235))
* chore: use versioned render in profilerChangeDescriptions test
([hoxyq](https://github.com/hoxyq) in
[react#28221](react#28221))
* chore: use versioned render in storeOwners test
([hoxyq](https://github.com/hoxyq) in
[react#28215](react#28215))
* chore: use versioned render in componentStacks test
([hoxyq](https://github.com/hoxyq) in
[react#28214](react#28214))
* chore: use versioned render in console test
([hoxyq](https://github.com/hoxyq) in
[react#28213](react#28213))
* chore: use versioned render in useEditableValue test
([hoxyq](https://github.com/hoxyq) in
[react#28212](react#28212))
* chore: use versioned render in FastRefreshDevToolsIntegration test
([hoxyq](https://github.com/hoxyq) in
[react#28211](react#28211))
* chore: add versioned render implementation for DevTools tests
([hoxyq](https://github.com/hoxyq) in
[react#28210](react#28210))
* chore: add single versioned implementation of act for DevTools tests
([hoxyq](https://github.com/hoxyq) in
[react#28186](react#28186))
* DevTools: Add support for useFormState
([eps1lon](https://github.com/eps1lon) in
[react#28232](react#28232))
* DevTools: Add support for useOptimistic Hook
([eps1lon](https://github.com/eps1lon) in
[react#27982](react#27982))
* Add stable React.act export ([acdlite](https://github.com/acdlite) in
[react#28160](react#28160))
* [flow] upgrade to 0.225.1 ([kassens](https://github.com/kassens) in
[react#27871](react#27871))
* fix[devtools/e2e]: add fallback for act in integration tests
([hoxyq](https://github.com/hoxyq) in
[react#27842](react#27842))
* Add stable concurrent option to react-test-renderer
([jackpope](https://github.com/jackpope) in
[react#27804](react#27804))
* Update act references in tests ([gnoff](https://github.com/gnoff) in
[react#27805](react#27805))
* Flow: make more objects exact ([kassens](https://github.com/kassens)
in [react#27790](react#27790))
bigfootjon pushed a commit that referenced this pull request Apr 18, 2024
…filters (#28417)

Following #28265, this should
disable location-based component filters.

```
// 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.
```

I am planning to publish a patch version of RDT soon, so I think its
better to remove this feature, instead of shipping it in a broken state.

The reason for filtering out these filters is a potential cases, where
we load filters from the backend (like in RN, where we storing some
settings on device), or these filters can be stored in user land
(`window.__REACT_DEVTOOLS_COMPONENT_FILTERS__`).

Explicitly tested the case when:
1. Load current RDT extension, add location-based component filter
2. Reload the page and observe that previously created component filter
is preserved
3. Re-load RDT extension with these changes, observe there is no
previously created component filter and user can't create a new
location-based filter
4. Reload RDT extension without these changes, no location-based filters
saved, user can create location-based filters

DiffTrain build for commit d4cac3f.
Akshato07 pushed a commit to Akshato07/-Luffy that referenced this pull request Feb 20, 2025
Full list of changes (not a public CHANGELOG):

* feature[REMOVED][devtools]: turn off / hide location based component
filters ([hoxyq](https://github.com/hoxyq) in
[#28417](react/react#28417))
* Add useSyncExternalStore and useTransition to getPrimitiveStackCache
([jamesbvaughan](https://github.com/jamesbvaughan) in
[#28399](react/react#28399))
* chore[devtools]: use react-window from npm and bump
react-virtualized-auto-sizer to ^1.0.23
([hoxyq](https://github.com/hoxyq) in
[#28408](react/react#28408))
* Pass ref as normal prop ([acdlite](https://github.com/acdlite) in
[#28348](react/react#28348))
* Combine createElement and JSX modules
([acdlite](https://github.com/acdlite) in
[#28320](react/react#28320))
* [Debug Tools] Always use includeHooksSource option
([sebmarkbage](https://github.com/sebmarkbage) in
[#28309](react/react#28309))
* Revert "[Tests] Reset modules by default"
([acdlite](https://github.com/acdlite) in
[#28318](react/react#28318))
* Switch <Context> to mean <Context.Provider>
([gaearon](https://github.com/gaearon) in
[#28226](react/react#28226))
* [Debug Tools] Introspect Promises in use()
([sebmarkbage](https://github.com/sebmarkbage) in
[#28297](react/react#28297))
* fix[devtools/useModalDismissSignal]: use getRootNode for shadow root
case support ([hoxyq](https://github.com/hoxyq) in
[#28145](react/react#28145))
* fix: define IS_ACT_ENVIRONMENT global for tests with concurrent mode
and synchronous act ([hoxyq](https://github.com/hoxyq) in
[#28296](react/react#28296))
* chore: gate legacy apis for react-devtools-shell
([hoxyq](https://github.com/hoxyq) in
[#28273](react/react#28273))
* DevTools: Add support for use(Context)
([eps1lon](https://github.com/eps1lon) in
[#28233](react/react#28233))
* Remove __self and __source location from elements
([sebmarkbage](https://github.com/sebmarkbage) in
[#28265](react/react#28265))
* chore: use versioned render in inspectedElement test
([hoxyq](https://github.com/hoxyq) in
[#28246](react/react#28246))
* chore: use versioned render in TimelineProfiler test and gate some for
legacy rendering ([hoxyq](https://github.com/hoxyq) in
[#28218](react/react#28218))
* [Tests] Reset modules by default
([rickhanlonii](https://github.com/rickhanlonii) in
[#28254](react/react#28254))
* chore: use versioned render in preprocessData test and gate some for …
([hoxyq](https://github.com/hoxyq) in
[#28219](react/react#28219))
* chore: use versioned render in storeStressSync test and gate them for
legacy rendering ([hoxyq](https://github.com/hoxyq) in
[#28216](react/react#28216))
* Patch devtools before running useMemo function in strict mode
([gsathya](https://github.com/gsathya) in
[#28249](react/react#28249))
* chore: use versioned render in storeComponentFilters test
([hoxyq](https://github.com/hoxyq) in
[#28241](react/react#28241))
* chore: use versioned render in profilerContext test
([hoxyq](https://github.com/hoxyq) in
[#28243](react/react#28243))
* chore: use versioned render in profilingCommitTreeBuilder test and
gate some for legacy rendering ([hoxyq](https://github.com/hoxyq) in
[#28236](react/react#28236))
* chore: use versioned render in profilingHostRoot test and gate some
for legacy rendering ([hoxyq](https://github.com/hoxyq) in
[#28237](react/react#28237))
* chore: use versioned render in profilingCache test
([hoxyq](https://github.com/hoxyq) in
[#28242](react/react#28242))
* chore: use versioned render in ownersListContext test
([hoxyq](https://github.com/hoxyq) in
[#28240](react/react#28240))
* chore: use versioned render in editing test
([hoxyq](https://github.com/hoxyq) in
[#28239](react/react#28239))
* chore: use versioned render in treeContext test
([hoxyq](https://github.com/hoxyq) in
[#28245](react/react#28245))
* chore: use versioned render in store test
([hoxyq](https://github.com/hoxyq) in
[#28244](react/react#28244))
* chore: use versioned render in profilerStore test
([hoxyq](https://github.com/hoxyq) in
[#28238](react/react#28238))
* chore: use versioned render in profilingCharts test
([hoxyq](https://github.com/hoxyq) in
[#28235](react/react#28235))
* chore: use versioned render in profilerChangeDescriptions test
([hoxyq](https://github.com/hoxyq) in
[#28221](react/react#28221))
* chore: use versioned render in storeOwners test
([hoxyq](https://github.com/hoxyq) in
[#28215](react/react#28215))
* chore: use versioned render in componentStacks test
([hoxyq](https://github.com/hoxyq) in
[#28214](react/react#28214))
* chore: use versioned render in console test
([hoxyq](https://github.com/hoxyq) in
[#28213](react/react#28213))
* chore: use versioned render in useEditableValue test
([hoxyq](https://github.com/hoxyq) in
[#28212](react/react#28212))
* chore: use versioned render in FastRefreshDevToolsIntegration test
([hoxyq](https://github.com/hoxyq) in
[#28211](react/react#28211))
* chore: add versioned render implementation for DevTools tests
([hoxyq](https://github.com/hoxyq) in
[#28210](react/react#28210))
* chore: add single versioned implementation of act for DevTools tests
([hoxyq](https://github.com/hoxyq) in
[#28186](react/react#28186))
* DevTools: Add support for useFormState
([eps1lon](https://github.com/eps1lon) in
[#28232](react/react#28232))
* DevTools: Add support for useOptimistic Hook
([eps1lon](https://github.com/eps1lon) in
[#27982](react/react#27982))
* Add stable React.act export ([acdlite](https://github.com/acdlite) in
[#28160](react/react#28160))
* [flow] upgrade to 0.225.1 ([kassens](https://github.com/kassens) in
[#27871](react/react#27871))
* fix[devtools/e2e]: add fallback for act in integration tests
([hoxyq](https://github.com/hoxyq) in
[#27842](react/react#27842))
* Add stable concurrent option to react-test-renderer
([jackpope](https://github.com/jackpope) in
[#27804](react/react#27804))
* Update act references in tests ([gnoff](https://github.com/gnoff) in
[#27805](react/react#27805))
* Flow: make more objects exact ([kassens](https://github.com/kassens)
in [#27790](react/react#27790))

DiffTrain build for commit react/react@288cf74.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed React Core Team Opened by a member of the React Core Team

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants