Replace global jest heuristic with IS_REACT_ACT_ENVIRONMENT (#22562)

• Remove jest global check in concurrent roots

In concurrent mode, instead of checking jest, we check the new IS_REACT_ACT_ENVIRONMENT global. The default behavior is false.

Legacy mode behavior is unchanged.

React's own internal test suite use a custom version of act that works by mocking the Scheduler — rather than the "real" act used publicly. So we don't enable the flag in our repo.

• Warn if act is called in wrong environment

Adds a warning if act is called but IS_REACT_ACT_ENVIRONMENT is not enabled. The goal is to prompt users to correctly configure their testing environment, so that if they forget to use act in a different test, we can detect and warn about.

It's expected that the environment flag will be configured by the testing framework. For example, a Jest plugin. We will link to the relevant documentation page, once it exists.

The warning only fires in concurrent mode. Legacy roots will keep the existing behavior.

Enable cache in test renderer (#22580)

Hydrate using SuspenseComponent as the parent (#22582)

• Add a failing test for Suspense hydration

• Include salazarm's changes to the test

• The hydration parent of a suspense boundary should be the boundary itself

This eventually got set when we popped back out of its children but it doesn't start out that way.

This fixes it so that the boundary parent is always the suspense boundary.

• We now need to log errors with a suspense boundary as a parent

For now, we just log this with commentNode.parentNode as the parent for purposes of the error message.

• Make a special getFirstHydratableChildWithinSuspenseInstance

We currently call getNextHydratableSibling but conceptually it's the child of the boundary. It just happens to be that when we use comment nodes, we need to call nextSibling in the DOM.

This makes this separation a bit clearer.

• Sync old fork

Co-authored-by: Dan Abramov [email protected]

DevTools: Include Edge in browser name detection (#22584)

React DevTools 4.20.0 -> 4.20.1 (#22583)

Upgrade useInsertionEffect to stable (#22589)

@huozhi tried this out and says it's working as expected. I think we can go ahead and move this into the stable channel, so that it is available in the React 18 alpha releases.

DevTools: Fix passing extensionId in evaled postMessage calls (#22590)

Clear extra nodes if there's a hydration mismatch within a suspense boundary (#22592)

• Clear extra nodes if there's a mismatch within a suspense boundary

This usually happens when we exit out a DOM node but a suspense boundary is a virtual DOM node and we didn't do it in that case because we took a short cut by calling resetHydrationState directly since we know we won't need to pop.

• Tighten up the types of getFirstHydratableChild

We currently call getFirstHydratableChild to step into the children of a suspense boundary. This can be a text node or a suspense boundary which isn't compatible with getFirstHydratableChild, and we cheat the type.

This accidentally works because .firstChild always returns null on those nodes in the DOM.

This just makes that explicit.

Support nonce option to be passed to inline scripts (#22593)

[Fizz] Add option to inject bootstrapping script tags after the shell is injected (#22594)

• Add option to inject bootstrap scripts

These are emitted right after the shell as flushed.

• Update ssr fixtures to use bootstrapScripts instead of manual script tag

• Add option to FB renderer too

Dev Tools: Relax constraint on passing extensionId for backend init (#22597)

React DevTools 4.20.1 -> 4.20.2 (#22605)

Fix typos (#22494)

Scheduling Profiler: De-emphasize React internal frames (#22588)

This commit adds code to all React bundles to explicitly register the beginning and ending of the module. This is done by creating Error objects (which capture the file name, line number, and column number) and passing them explicitly to a DevTools hook (when present).

Next, as the Scheduling Profiler logs metadata to the User Timing API, it prints these module ranges along with other metadata (like Lane values and profiler version number).

Lastly, the Scheduling Profiler UI compares stack frames to these ranges when drawing the flame graph and dims or de-emphasizes frames that fall within an internal module.

The net effect of this is that user code (and 3rd party code) stands out clearly in the flame graph while React internal modules are dimmed.

Internal module ranges are completely optional. Older profiling samples, or ones recorded without the React DevTools extension installed, will simply not dim the internal frames.

Scheduling Profiler: Add marks for component effects (mount and unmount) (#22578)

DevTools (and its profilers) should not require users to be familiar with React internals. Although the scheduling profiler includes a CPU sample flame graph, it's there for advanced use cases and shouldn't be required to identify common performance issues.

This PR proposes adding new marks around component effects. This will enable users to identify components with slow effect create/destroy functions without requiring them to dig through the call stack. (Once #22529 lands, these new marks will also include component stacks, making them more useful still.)

For example, here's a profile with a long-running effect. Without this change, it's not clear why the effects phase takes so long. After this change, it's more clear why that the phase is longer because of a specific component.

We may consider adding similar marks around render phase hooks like useState, useReducer, useMemo. I avoided doing that in this PR because it would be a pretty pervasive change to the ReactFiberHooks file.

Note that this change should have no effect on production bundles since everything is guarded behind a profiling feature flag.

Going to tag more people than I normally would for this pR, since it touches both reconciler and DevTools packages. Feel free to ignore though if you don't have strong feelings.

Note that although this PR adds new marks to the scheduling profiler, it's done in a way that's backwards compatible for older profiles.

Scheduling Profiler does not warn about long transitions (#22614)

Initial implementation of cache cleanup (#22510)

This is an initial, partial implementation of a cleanup mechanism for the experimental Cache API. The idea is that consumers of the Cache API can register to be informed when a given Cache instance is no longer needed so that they can perform associated cleanup tasks to free resources stored in the cache. A canonical example would be cancelling pending network requests.

An overview of the high-level changes:

• Changes the Cache type from a Map of cache instances to be an object with the original Map of instances, a reference count (to count roughly "active references" to the cache instances - more below), and an AbortController.
• Adds a new public API, unstable_getCacheSignal(): AbortSignal, which is callable during render. It returns an AbortSignal tied to the lifetime of the cache - developers can listen for the 'abort' event on the signal, which React now triggers when a given cache instance is no longer referenced.
  • Note that AbortSignal is a web standard that is supported by other platform APIs; for example a signal can be passed to fetch() to trigger cancellation of an HTTP request.
• Implements the above - triggering the 'abort' event - by handling passive mount/unmount for HostRoot and CacheComponent fiber nodes.

Cases handled:

• Aborted transitions: we clean up a new cache created for an aborted transition
• Suspense: we retain a fresh cache instance until a suspended tree resolves

For follow-ups:

• When a subsequent cache refresh is issued before a previous refresh completes, the refreshes are queued. Fresh cache instances for previous refreshes in the queue should be cleared, retaining only the most recent cache. I plan to address this in a follow-up PR.
• If a refresh is cancelled, the fresh cache should be cleaned up.

Expand act warning to cover all APIs that might schedule React work (#22607)

• Move isActEnvironment check to function that warns

I'm about to fork the behavior in legacy roots versus concurrent roots even further, so I'm lifting this up so I only have to fork once.

• Lift mode check, too

Similar to previous commit. I only want to check this once. Not for performance reasons, but so the logic is easier to follow.

• Expand act warning to include non-hook APIs

In a test environment, React warns if an update isn't wrapped with act — but only if the update originates from a hook API, like useState.

We did it this way for backwards compatibility with tests that were written before the act API was introduced. Those tests didn't require act, anyway, because in a legacy root, all tasks are synchronous except for useEffect.

However, in a concurrent root, nearly every task is asynchronous. Even tasks that are synchronous may spawn additional asynchronous work. So all updates need to be wrapped with act, regardless of whether they originate from a hook, a class, a root, or any other type of component.

This commit expands the act warning to include any API that triggers an update.

It does not currently account for renders that are caused by a Suspense promise resolving; those are modelled slightly differently from updates. I'll fix that in the next step.

I also removed the check for whether an update is batched. It shouldn't matter, because even a batched update can spawn asynchronous work, which needs to be flushed by act.

This change only affects concurrent roots. The behavior in legacy roots is the same.

• Expand act warning to include Suspense resolutions

For the same reason we warn when an update is not wrapped with act, we should warn if a Suspense promise resolution is not wrapped with act. Both "pings" and "retries".

Legacy root behavior is unchanged.

Remove warning for dangling passive effects (#22609)

In legacy mode, a test can get into a situation where passive effects are "dangling" — an update finished, and scheduled some passive effects, but the effects don't flush.

This is why React warns if you don't wrap updates in act. The act API is responsible for flushing passive effects. But there are some cases where the act API (in legacy roots) intentionally doesn't warn, like updates that originate from roots and classes. It's possible those updates will render children that contain useEffect. Because of this, dangling effects are still possible, and React doesn't warn about it.

So we implemented a second act warning for dangling effects.

However, in concurrent roots, we now enforce that all APIs that schedule React work must be wrapped in act. There's no scenario where dangling passive effects can happen that doesn't already trigger the warning for updates. So the dangling effects warning is redundant.

The warning was never part of a public release. It was only enabled in concurrent roots.

So we can delete it.

Enable scheduling profiler for RN FB profiling builds (#22566)

Reattachment of the splash page event listeners (#22558) (#22560)

Show warning in UI when duplicate installations of DevTools extension are detected (#22563)

DevTools prepare release script resets patch version when bumping minor (#22568)

React DevTools 4.19.2 -> 4.20.2 (#22569)

Only show DevTools warning about unrecognized build in Chrome (#22571)