fix[devtools/inspectElement]: dont pause initial inspectElement call when user switches tabs #27488

hoxyq · 2023-10-09T10:05:05Z

There are not so many changes, most of them are changing imports, because I've moved types for UI in a single file.

In #27357 I've added support for pausing polling events: when user inspects an element, we start polling React DevTools backend for updates in props / state. If user switches tabs, extension's service worker can be killed by browser and this polling will start spamming errors.

What I've missed is that we also have a separate call for this API, but which is executed only once when user selects an element. We don't handle promise rejection here and this can lead to some errors when user selects an element and switches tabs right after it.

The only change here is that this API now has shouldListenToPauseEvents param, which is true for polling, so we will pause polling once user switches tabs. It is false by default, so we won't pause initial call by accident.

https://github.com/hoxyq/react/blob/af8beeebf63b5824497fcd0bb35b7c0ac8fe60a0/packages/react-devtools-shared/src/backendAPI.js#L96

…when user switched tabs

huntie

LGTM :)

…when user switches tabs (facebook#27488) There are not so many changes, most of them are changing imports, because I've moved types for UI in a single file. In facebook#27357 I've added support for pausing polling events: when user inspects an element, we start polling React DevTools backend for updates in props / state. If user switches tabs, extension's service worker can be killed by browser and this polling will start spamming errors. What I've missed is that we also have a separate call for this API, but which is executed only once when user selects an element. We don't handle promise rejection here and this can lead to some errors when user selects an element and switches tabs right after it. The only change here is that this API now has `shouldListenToPauseEvents` param, which is `true` for polling, so we will pause polling once user switches tabs. It is `false` by default, so we won't pause initial call by accident. https://github.com/hoxyq/react/blob/af8beeebf63b5824497fcd0bb35b7c0ac8fe60a0/packages/react-devtools-shared/src/backendAPI.js#L96

…experimental prefix for server action APIs (#56809) The latest React canary builds have a few changes that need to be adopted for compatability. 1. the `useFormState` and `useFormStatus` hooks in `react-dom` and the `formData` opiont in `react-dom/server` are no longer prefixed with `experimental_` 2. server content (an undocumented React feature) has been removed. Next only had trivial intenral use of this API and did not expose a coherent feature to Next users (no ability to seed context on refetches). It is still possible that some users used the React server context APIs which is why this should go into Next 14. ### React upstream changes - facebook/react#27513 - facebook/react#27514 - facebook/react#27511 - facebook/react#27508 - facebook/react#27502 - facebook/react#27474 - facebook/react#26789 - facebook/react#27500 - facebook/react#27488 - facebook/react#27458 - facebook/react#27471 - facebook/react#27470 - facebook/react#27464 - facebook/react#27456 - facebook/react#27462 - facebook/react#27461 - facebook/react#27460 - facebook/react#27459 - facebook/react#27454 - facebook/react#27457 - facebook/react#27453 - facebook/react#27401 - facebook/react#27443 - facebook/react#27445 - facebook/react#27364 - facebook/react#27440 - facebook/react#27436 --------- Co-authored-by: Zack Tanner <zacktanner@gmail.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Jiachi Liu <inbox@huozhi.im>

Changes: * fix[devtools/useMemoCache]: add stub for useMemoCache in ReactDebugHook ([hoxyq](https://github.com/hoxyq) in [#27472](#27472)) * useDeferredValue should skip initialValue if it suspends ([acdlite](https://github.com/acdlite) in [#27509](#27509)) * feat[react-devtools-extensions/logging]: initialize session id on the client for logging ([hoxyq](https://github.com/hoxyq) in [#27517](#27517)) * refactor[react-devtools-extensions]: use globals to eliminate dead code ([hoxyq](https://github.com/hoxyq) in [#27516](#27516)) * fix[devtools/inspectElement]: dont pause initial inspectElement call when user switches tabs ([hoxyq](https://github.com/hoxyq) in [#27488](#27488))

…when user switches tabs (facebook#27488) There are not so many changes, most of them are changing imports, because I've moved types for UI in a single file. In facebook#27357 I've added support for pausing polling events: when user inspects an element, we start polling React DevTools backend for updates in props / state. If user switches tabs, extension's service worker can be killed by browser and this polling will start spamming errors. What I've missed is that we also have a separate call for this API, but which is executed only once when user selects an element. We don't handle promise rejection here and this can lead to some errors when user selects an element and switches tabs right after it. The only change here is that this API now has `shouldListenToPauseEvents` param, which is `true` for polling, so we will pause polling once user switches tabs. It is `false` by default, so we won't pause initial call by accident. https://github.com/hoxyq/react/blob/af8beeebf63b5824497fcd0bb35b7c0ac8fe60a0/packages/react-devtools-shared/src/backendAPI.js#L96

Changes: * fix[devtools/useMemoCache]: add stub for useMemoCache in ReactDebugHook ([hoxyq](https://github.com/hoxyq) in [facebook#27472](facebook#27472)) * useDeferredValue should skip initialValue if it suspends ([acdlite](https://github.com/acdlite) in [facebook#27509](facebook#27509)) * feat[react-devtools-extensions/logging]: initialize session id on the client for logging ([hoxyq](https://github.com/hoxyq) in [facebook#27517](facebook#27517)) * refactor[react-devtools-extensions]: use globals to eliminate dead code ([hoxyq](https://github.com/hoxyq) in [facebook#27516](facebook#27516)) * fix[devtools/inspectElement]: dont pause initial inspectElement call when user switches tabs ([hoxyq](https://github.com/hoxyq) in [facebook#27488](facebook#27488))

…when user switches tabs (#27488) There are not so many changes, most of them are changing imports, because I've moved types for UI in a single file. In #27357 I've added support for pausing polling events: when user inspects an element, we start polling React DevTools backend for updates in props / state. If user switches tabs, extension's service worker can be killed by browser and this polling will start spamming errors. What I've missed is that we also have a separate call for this API, but which is executed only once when user selects an element. We don't handle promise rejection here and this can lead to some errors when user selects an element and switches tabs right after it. The only change here is that this API now has `shouldListenToPauseEvents` param, which is `true` for polling, so we will pause polling once user switches tabs. It is `false` by default, so we won't pause initial call by accident. https://github.com/hoxyq/react/blob/af8beeebf63b5824497fcd0bb35b7c0ac8fe60a0/packages/react-devtools-shared/src/backendAPI.js#L96 DiffTrain build for commit 77ec618.

Changes: * fix[devtools/useMemoCache]: add stub for useMemoCache in ReactDebugHook ([hoxyq](https://github.com/hoxyq) in [#27472](facebook/react#27472)) * useDeferredValue should skip initialValue if it suspends ([acdlite](https://github.com/acdlite) in [#27509](facebook/react#27509)) * feat[react-devtools-extensions/logging]: initialize session id on the client for logging ([hoxyq](https://github.com/hoxyq) in [#27517](facebook/react#27517)) * refactor[react-devtools-extensions]: use globals to eliminate dead code ([hoxyq](https://github.com/hoxyq) in [#27516](facebook/react#27516)) * fix[devtools/inspectElement]: dont pause initial inspectElement call when user switches tabs ([hoxyq](https://github.com/hoxyq) in [#27488](facebook/react#27488)) DiffTrain build for commit facebook/react@20c91b6.

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

hoxyq force-pushed the devtools/dont-pause-initial-inspect-element-call branch from af8beee to 7fef594 Compare October 9, 2023 10:19

fix[devtools/inspectElement]: dont pause initial inspectElement call …

0e6e85c

…when user switched tabs

hoxyq force-pushed the devtools/dont-pause-initial-inspect-element-call branch from 7fef594 to 0e6e85c Compare October 9, 2023 10:35

huntie approved these changes Oct 10, 2023

View reviewed changes

hoxyq merged commit 77ec618 into facebook:main Oct 10, 2023

hoxyq deleted the devtools/dont-pause-initial-inspect-element-call branch October 10, 2023 17:10

shuding mentioned this pull request Oct 11, 2023

Upgrade vendored React vercel/next.js#56705

Closed

gnoff mentioned this pull request Oct 13, 2023

Update React from d900fadbf to 09fbee89d. Removes server context and experimental prefix for server action APIs vercel/next.js#56809

Merged

hoxyq mentioned this pull request Oct 18, 2023

React DevTools 4.28.4 -> 4.28.5 #27538

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix[devtools/inspectElement]: dont pause initial inspectElement call when user switches tabs #27488

fix[devtools/inspectElement]: dont pause initial inspectElement call when user switches tabs #27488

hoxyq commented Oct 9, 2023

huntie left a comment

Labels

3 participants

fix[devtools/inspectElement]: dont pause initial inspectElement call when user switches tabs #27488

fix[devtools/inspectElement]: dont pause initial inspectElement call when user switches tabs #27488

Conversation

hoxyq commented Oct 9, 2023

huntie left a comment

Choose a reason for hiding this comment

Labels

3 participants