feat[devtools]: display Forget badge for the relevant components #27709

hoxyq · 2023-11-15T15:25:10Z

Adds Forget badge to all relevant components.

Changes:

If component is compiled with Forget and using a built-in useMemoCache hook, it will have a Forget badge next to its display name in:
- components tree
- inspected element view
- owners list
Such badges are indexable, so Forget components can be searched using search bar.

Fixes:

Displaying the badges for owners list inside the inspected component view

Implementation:

React DevTools backend is responsible for identifying if component is compiled with Forget, based on fiber.updateQueue.memoCache. It will wrap component's display name with Forget(...) prefix before passing operations to the frontend. On the frontend side, we will parse the display name and strip Forget prefix, marking the corresponding element by setting compiledWithForget field. Almost the same logic is currently used for HOC display names.

poteto · 2023-11-15T15:40:20Z

packages/react-devtools-shared/src/backend/renderer.js

-  function getDisplayNameForFiber(fiber: Fiber): string | null {
+  function getDisplayNameForFiber(
+    fiber: Fiber,
+    shouldSkipForgetCheck: boolean = false,


Is there a way to do this without adding a boolean argument?

Yeah, probably. Without recursion, but with some auxiliary variables. Why do you want to remove it?

The code is unnecessarily complex here with the recursion though? It's harder to reason about

The code is unnecessarily complex here with the recursion though?

I don't think so, but I can rewrite it, I don't have a strong opinion on it.

I am kinda surprised that this is the only thing we are discussing in this PR.

gsathya

Thanks!

### Breaking * refactor[devtools]: highlight an array of elements for native ([hoxyq](https://github.com/hoxyq) in [#27734](#27734)) ### Features * feat[devtools]: display Forget badge for the relevant components ([hoxyq](https://github.com/hoxyq) in [#27709](#27709)) ### Other * Added windows powershell syntax to build scripts ([PrathamLalwani](https://github.com/PrathamLalwani) in [#27692](#27692)) * refactor[react-devtools-shared]: minor parsing improvements and modifications ([hoxyq](https://github.com/hoxyq) in [#27661](#27661))

…ebook#27709) Adds `Forget` badge to all relevant components. Changes: - If component is compiled with Forget and using a built-in `useMemoCache` hook, it will have a `Forget` badge next to its display name in: - components tree - inspected element view - owners list - Such badges are indexable, so Forget components can be searched using search bar. Fixes: - Displaying the badges for owners list inside the inspected component view Implementation: - React DevTools backend is responsible for identifying if component is compiled with Forget, based on `fiber.updateQueue.memoCache`. It will wrap component's display name with `Forget(...)` prefix before passing operations to the frontend. On the frontend side, we will parse the display name and strip Forget prefix, marking the corresponding element by setting `compiledWithForget` field. Almost the same logic is currently used for HOC display names.

### Breaking * refactor[devtools]: highlight an array of elements for native ([hoxyq](https://github.com/hoxyq) in [facebook#27734](facebook#27734)) ### Features * feat[devtools]: display Forget badge for the relevant components ([hoxyq](https://github.com/hoxyq) in [facebook#27709](facebook#27709)) ### Other * Added windows powershell syntax to build scripts ([PrathamLalwani](https://github.com/PrathamLalwani) in [facebook#27692](facebook#27692)) * refactor[react-devtools-shared]: minor parsing improvements and modifications ([hoxyq](https://github.com/hoxyq) in [facebook#27661](facebook#27661))

) Adds `Forget` badge to all relevant components. Changes: - If component is compiled with Forget and using a built-in `useMemoCache` hook, it will have a `Forget` badge next to its display name in: - components tree - inspected element view - owners list - Such badges are indexable, so Forget components can be searched using search bar. Fixes: - Displaying the badges for owners list inside the inspected component view Implementation: - React DevTools backend is responsible for identifying if component is compiled with Forget, based on `fiber.updateQueue.memoCache`. It will wrap component's display name with `Forget(...)` prefix before passing operations to the frontend. On the frontend side, we will parse the display name and strip Forget prefix, marking the corresponding element by setting `compiledWithForget` field. Almost the same logic is currently used for HOC display names. DiffTrain build for commit 6c7b41d.

hoxyq requested review from gsathya, poteto and mofeiZ November 15, 2023 15:25

facebook-github-bot added CLA Signed React Core Team Opened by a member of the React Core Team labels Nov 15, 2023

hoxyq changed the title ~~feat[devtools]: display Forget badge for the required components~~ feat[devtools]: display Forget badge for the relevant components Nov 15, 2023

hoxyq force-pushed the devtools/forget-badges branch 2 times, most recently from 403e638 to e4136b8 Compare November 15, 2023 15:34

poteto reviewed Nov 15, 2023

View reviewed changes

hoxyq force-pushed the devtools/forget-badges branch from e4136b8 to 5e3be29 Compare November 16, 2023 17:57

feat[devtools]: display Forget badge for the required components

467275b

hoxyq force-pushed the devtools/forget-badges branch from 5e3be29 to 467275b Compare November 16, 2023 18:22

gsathya approved these changes Nov 22, 2023

View reviewed changes

hoxyq merged commit 6c7b41d into facebook:main Nov 23, 2023
36 checks passed

hoxyq deleted the devtools/forget-badges branch November 23, 2023 18:37

hoxyq mentioned this pull request Nov 29, 2023

React DevTools 4.28.5 -> 5.0.0 #27759

Merged

ztanner mentioned this pull request Dec 15, 2023

Update React from 2c338b16f to 0cdfef19b vercel/next.js#59666

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat[devtools]: display Forget badge for the relevant components #27709

feat[devtools]: display Forget badge for the relevant components #27709

hoxyq commented Nov 15, 2023 •

edited

Loading

poteto Nov 15, 2023

hoxyq Nov 15, 2023

gsathya Nov 17, 2023

hoxyq Nov 17, 2023

gsathya left a comment

feat[devtools]: display Forget badge for the relevant components #27709

feat[devtools]: display Forget badge for the relevant components #27709

Conversation

hoxyq commented Nov 15, 2023 • edited Loading

poteto Nov 15, 2023

Choose a reason for hiding this comment

hoxyq Nov 15, 2023

Choose a reason for hiding this comment

gsathya Nov 17, 2023

Choose a reason for hiding this comment

hoxyq Nov 17, 2023

Choose a reason for hiding this comment

gsathya left a comment

Choose a reason for hiding this comment

hoxyq commented Nov 15, 2023 •

edited

Loading