Commit Graph

1072 Commits

Author SHA1 Message Date
sebmarkbage 9b5d5c32af [Fiber] Don't call performance.now() twice in a row (#30936)
DiffTrain build for commit https://github.com/facebook/react/commit/a5a7f1063e6f190c64c779b2aa54d28fb7b92cfb.
2024-09-10 13:54:16 -07:00
acdlite c56b0edd51 Prerender during same pass if blocked anyway (#30879)
If something suspends in the shell — i.e. we won't replace the suspended
content with a fallback — we might as well prerender the siblings during
the current render pass, instead of spawning a separate prerender pass.

This is implemented by setting the "is prerendering" flag to true
whenever we suspend in the shell. But only if we haven't already skipped
over some siblings, because if so, then we need to schedule a separate
prerender pass regardless.

DiffTrain build for commit https://github.com/facebook/react/commit/66cf2cfc8a8c4b09d2b783fd7302ae6b24150935.
2024-09-10 10:30:51 -07:00
SamChou19815 12971be8e9 [flow] Upgrade Flow to 0.245.2 (#30919)
## Summary

This PR bumps Flow all the way to the latest 0.245.2.

Most of the suppressions comes from Flow v0.239.0's change to include
undefined in the return of `Array.pop`.

I also enabled `react.custom_jsx_typing=true` and added custom jsx
typing to match the old behavior that `React.createElement` is
effectively any typed. This is necessary since various builtin
components like `React.Fragment` is actually symbol in the React repo
instead of `React.AbstractComponent<...>`. It can be made more accurate
by customizing the `React$CustomJSXFactory` type, but I will leave it to
the React team to decide.

## How did you test this change?

`yarn flow` for all the renderers

DiffTrain build for commit https://github.com/facebook/react/commit/e210d08180a63f42079b91acaa7f6af15eef6d32.
2024-09-09 08:51:21 -07:00
josephsavona 15892717ea Fix useMemoCache with setState in render
Fixes the bug that @alexmckenley and @mofeiZ found where setState-in-render can reset useMemoCache and cause an infinite loop. The bug was that renderWithHooksAgain() was not resetting hook state when rerendering (so useMemo values were preserved) but was resetting the updateQueue. This meant that the entire memo cache was cleared on a setState-in-render.

The fix here is to call a new helper function to clear the update queue. It nulls out other properties, but for memoCache it just sets the index back to zero.

ghstack-source-id: fc0947ce21
Pull Request resolved: https://github.com/facebook/react/pull/30889

DiffTrain build for commit https://github.com/facebook/react/commit/727b3615287074ddaa28069bfbd2dfee8cf73575.
2024-09-06 14:40:39 -07:00
sebmarkbage 6f1fca9c4f [Fiber] Move runWithFiberInDEV from CommitWork to CommitEffects (#30882)
Stacked on #30881.

Move `runWithFiberInDEV` from the recursive part of the commit phase and
instead wrap each call into user space. These should really map 1:1 with
where we're using `try/catch` since that's where we're calling into user
space.

The goal of this is to avoid the extra stack frames added by
`enableOwnerStacks` in the recursive parts to avoid stack overflow. This
way we only have a couple of extra at the end of the stack instead of a
couple of extra at every depth of the tree.

DiffTrain build for commit https://github.com/facebook/react/commit/a03254bc60b06c535c37e43c53b1fd40757b2ef4.
2024-09-05 18:04:03 -07:00
sebmarkbage d118acbb84 [Fiber] Extract Functions that Call User Space and Host Configs in Commit to Separate Modules (#30881)
This is mostly just moves and same code extracted into utility
functions.

This is to help clarify what needs to be wrapped in try/catch and
runWithFiberInDEV. I'll do the runWithFiberInDEV changes in a follow up.

This leaves ReactCommitWork mostly to do matching on the tag and the
recursive loops.

DiffTrain build for commit https://github.com/facebook/react/commit/fe03c56d1e51379a18676b04cf185e76f04cd457.
2024-09-05 18:02:01 -07:00
acdlite 9e99471041 Schedule prerender after something suspends (#30800)
Adds the concept of a "prerender". These special renders are spawned
whenever something suspends (and we're not already prerendering).

The purpose is to move speculative rendering work into a separate phase
that does not block the UI from updating. For example, during a
transition, if something suspends, we should not speculatively prerender
siblings that will be replaced by a fallback in the UI until *after* the
fallback has been shown to the user.

DiffTrain build for commit https://github.com/facebook/react/commit/e10e8681824e56c10fdb14e0359d878bcd748937.
2024-09-04 11:04:03 -07:00
acdlite 9625df2bf8 Temporarily disable suspending during work loop (#30762)
### Based on

- #30761
- #30759

---

`use` has an optimization where in some cases it can suspend the work
loop during the render phase until the data has resolved, rather than
unwind the stack and lose context. However, the current implementation
is not compatible with sibling prerendering. So I've temporarily
disabled it until the sibling prerendering has been refactored. We will
add it back in a later step.

DiffTrain build for commit https://github.com/facebook/react/commit/8b4c54c00f5c047a72a4cecc2689196786c3e5ff.
2024-09-04 09:47:08 -07:00
sebmarkbage 18e907e144 [Fiber] Stash ThenableState on the Dependencies Object for Use By DevTools (#30866)
This lets us track what a Component might suspend on from DevTools. We
could already collect this by replaying a component's Hooks but that
would be expensive to collect from a whole tree.

The thenables themselves might contain useful information but mainly
we'd want access to the `_debugInfo` on the thenables which might
contain additional information from the server.

https://github.com/facebook/react/blob/19bd26beb689e554fceb0b929dc5199be8cba594/packages/shared/ReactTypes.js#L114

In a follow up we should really do something similar in Flight to
transfer `use()` on the debugInfo of that Server Component.

DiffTrain build for commit https://github.com/facebook/react/commit/8d68da3f7396064614f34b84881fe8833b6039ac.
2024-09-03 13:12:53 -07:00
rickhanlonii 3ba4b124b2 Enable suspenseCallback on React Native (#29210)
## Summary

suspenseCallback feature has proved to be useful for FB Web. Let's look
at enabling the feature for the React Native build.

## How did you test this change?

Will sync the react changes with a React Native build and will verify
that performance logging is correctly notified of suspense promises
during the suspense callback.

DiffTrain build for commit https://github.com/facebook/react/commit/246d7bfeb0c90ecccd9531929b60a79d628a4c78.
2024-08-26 19:14:20 -07:00
acdlite 6c99ba76c9 Fix: Synchronous popstate transitions (#30759)
This is a refactor of the fix in #27505.

When a transition update is scheduled by a popstate event, (i.e. a back/
forward navigation) we attempt to render it synchronously even though
it's a transition, since it's likely the previous page's data is cached.

In #27505, I changed the implementation so that it only "upgrades" the
priority of the transition for a single attempt. If the attempt
suspends, say because the data is not cached after all, from then on it
should be treated as a normal transition.

But it turns out #27505 did not work as intended, because it relied on
marking the root with pending synchronous work (root.pendingLanes),
which was never cleared until the popstate update completed.

The test scenarios I wrote accidentally worked for a different reason
related to suspending the work loop, which I'm currently in the middle
of refactoring.

DiffTrain build for commit https://github.com/facebook/react/commit/ee7f6757c446c4e79ecc7e2bc22b8c9b712834b7.
2024-08-23 09:38:02 -07:00
SamChou19815 99d43a14d0 [flow] Eliminate a few React.Element type that will be synced to react-native (#30719)
## Summary

Flow will eventually remove the specific `React.Element` type. For most
of the code, it can be replaced with `React.MixedElement` or
`React.Node`.

When specific react elements are required, it needs to be replaced with
either `React$Element` which will trigger a `internal-type` lint error
that can be disabled project-wide, or use
`ExactReactElement_DEPRECATED`.

Fortunately in this case, this one can be replaced with just
`React.MixedElement`.

## How did you test this change?

`flow`

DiffTrain build for commit https://github.com/facebook/react/commit/85fb95cdffdd95f2f908ee71974cae06b1c866e1.
2024-08-16 10:03:44 -07:00
gaearon 220e25c8db [Fresh] Always reset useMemoCache on Fast Refresh (#30700)
Stacked on https://github.com/facebook/react/pull/30662.

Alternative to https://github.com/facebook/react/pull/30663 and
https://github.com/facebook/react/pull/30677.

During a Fast Refresh, we always want to evict the memo cache, same as
we do with normal `useMemo`. The mechanism used by `useMemo` and other
Hooks is this module-level variable:

https://github.com/facebook/react/blob/fca5d655d78917400a2722287351c20938166669/packages/react-reconciler/src/ReactFiberHooks.js#L304-L307

which has DEV-only behavior as if the dependencies are always different:

https://github.com/facebook/react/blob/fca5d655d78917400a2722287351c20938166669/packages/react-reconciler/src/ReactFiberHooks.js#L451-L460

The `useMemoCache` Hook doesn't use a dependency array but conceptually
I think we want the same behavior.

## Test Plan

The test passes.

---------

Co-authored-by: Lauren Tan <poteto@users.noreply.github.com>

DiffTrain build for commit https://github.com/facebook/react/commit/7e8a06cf4c628be45171da52c1a8e97f9869b7ee.
2024-08-14 17:11:17 -07:00
kassens 7a7933bb8c Cloned flag to avoid extra clones in persistent renderer (#27647)
Persistent renderers used the `Update` effect flag to check if a subtree
needs to be cloned. In some cases, that causes extra renders, such as
when a layout effect is triggered which only has an effect on the JS
side, but doesn't update the host components.

It's been a bit tricky to find the right places where this needs to be
set and I'm not 100% sure I got all the cases even though the tests
passed.

DiffTrain build for commit https://github.com/facebook/react/commit/5fb67fa25c4ea8be046c6d9af41047f3cc379279.
2024-08-01 12:18:26 -07:00
eps1lon 9fc6c4cfa7 [Devtools] Ensure initial read of useFormStatus returns NotPendingTransition (#28728)
DiffTrain build for commit https://github.com/facebook/react/commit/88ee14ffa57beb0689f26f0c52c357e3ac446af8.
2024-08-01 02:03:31 -07:00
jackpope b85f79ca45 Set enableLazyContextPropagation to dynamic on RN (#30516)
DiffTrain build for commit https://github.com/facebook/react/commit/3f8b1333daade70117e5915304cca19f14e87b53.
2024-07-30 15:38:52 -07:00
gaearon b255b4eed0 Remove RefreshRuntime.findAffectedHostInstances (#30538)
I originally added this with a plan to visualize which nodes got updated
after a Fast Refresh. I didn't end up implementing that part, and to my
knowledge, no actively used integration actually does that or use this
method.

- [Webpack plugin doesn't use
it](https://github.com/pmmmwh/react-refresh-webpack-plugin/blob/f1c8b9a44198449093ca95f85af5df97925e1cfc/lib/runtime/RefreshUtils.js)
- [RN doesn't use
it](https://github.com/facebook/react-native/blob/23c5c42de01953ed7b8e8938c2d3a8fac82250a0/packages/react-native/Libraries/Core/setUpReactRefresh.js)
- [Global GitHub code
search](https://github.com/search?q=findAffectedHostInstances&type=code&p=1)
only shows copies of this code and the type definition based on it, but
not actual calls to it

We should be able to delete this without a problem.

DiffTrain build for commit https://github.com/facebook/react/commit/96f3093becc1f26e06549b9a54b93db9df8f5689.
2024-07-30 14:14:58 -07:00
sebmarkbage 69c4befd2e [Fiber] Make DevTools Config use Static Injection (#30522)
We use static dependency injection. We shouldn't use this dynamic
dependency injection we do for DevTools internals. There's also meta
programming like spreading and stuff that isn't needed.

This moves the config from `injectIntoDevTools` to the FiberConfig so it
can be statically resolved.

Closure Compiler has some trouble generating optimal code for this
anyway so ideally we'd refactor this further but at least this is better
and saves a few bytes and avoids some code paths (when minified).

DiffTrain build for commit https://github.com/facebook/react/commit/146df7c311831a1d5b35f3783dae4a7030638fcf.
2024-07-30 12:11:02 -07:00
sebmarkbage a3617011b8 [Fiber/DevTools] Stop injecting findHostInstanceByFiber (#30519)
This is not used by DevTools since it has its own implementation of it.

This function is getting removed since `findDOMNode` is getting removed
so we shouldn't keep around extra bytes unnecessarily.

There is also `findHostInstancesForRefresh` which should really be
implemented on the `react-refresh` side. Not using an injection but
that's a heavier lift and only affects `__DEV__`.

DiffTrain build for commit https://github.com/facebook/react/commit/bea5a2bc46cc95713392175c3c6307e49c14cd98.
2024-07-29 17:12:31 -07:00
kassens aaac27a414 [RN] experiment to move Fabric completeWork to the commit phase (#30513)
There is currently a mismatch in how the persistent mode JS API and the
Fabric native code interpret `completeRoot`.

This is a short-lived experiment to see the effect of moving the Fabric
`completeRoot` call from `finalizeContainerChildren` to
`replaceContainerChildren` which in some cases does not get called.

DiffTrain build for commit https://github.com/facebook/react/commit/6b82f3c9048ff0dd7e6d628dc5770faf85d32a87.
2024-07-29 16:00:27 -07:00
poteto f98078e3fb [ci] Fix invalid username and email in synthetic commit
ghstack-source-id: 951d0ef445
Pull Request resolved: https://github.com/facebook/react/pull/30486

DiffTrain build for commit https://github.com/facebook/react/commit/b9af819f8b0e7f14200cfffe04da835b56f2f75d.
2024-07-26 12:22:37 -07:00
sebmarkbage f902e21009 Switch to binding the console with badging instead of calling it directly (#30461)
This is a major nit but this avoids an extra stack frame when we're
replaying logs.

Normally the `printToConsole` frame doesn't show up because it'd be
ignore listed.

<img width="421" alt="Screenshot 2024-07-25 at 11 49 39 AM"
src="https://github.com/user-attachments/assets/81334c2f-e19e-476a-871e-c4db9dee294e">

When you expand to show ignore listed frames a ton of other frames show
up.

<img width="516" alt="Screenshot 2024-07-25 at 11 49 47 AM"
src="https://github.com/user-attachments/assets/2ab8bdfb-464c-408d-9176-ee2fabc114b6">

The annoying thing about this frame is that it's at the top of the stack
where as typically framework stuff ends up at the bottom and something
you can ignore. The user space stack comes first.

With this fix there's no longer any `printToConsole` frame.

<img width="590" alt="Screenshot 2024-07-25 at 12 09 09 PM"
src="https://github.com/user-attachments/assets/b8365d53-31f3-43df-abce-172d608d3c9c">

Am I wiling to eat the added complexity and slightly slower performance
for this nit? Definitely.

DiffTrain build for commit https://github.com/facebook/react/commit/e8df0cf9f7c7f641192f19841db9bf34b6a0abf7.
2024-07-25 09:37:11 -07:00
jackpope 4609b0b955 Remove allowConcurrentByDefault flag (#30445)
Following https://github.com/facebook/react/pull/30436

Concurrent by default strategy has been unshipped. Here we clean up the
`allowConcurrentByDefault` path and related logic/tests.

For now, this keeps the `concurrentUpdatesByDefaultOverride` argument in
`createContainer` and `createHydrationContainer` and ignores the value
to prevent more breaking changes to `react-reconciler` in the RC stage.

DiffTrain build for commit https://github.com/facebook/react/commit/14a4699ff173936a30ec453f7b94d47105bbb252.
2024-07-25 09:04:45 -07:00
sebmarkbage b7c63f31fb [Fiber] Call life-cycles with a react-stack-bottom-frame stack frame (#30429)
Stacked on #30427.

Most hooks and such are called inside renders which already have these
on the stack but life-cycles that call out on them are useful to cut off
too.

Typically we don't create JSX in here so they wouldn't be part of owner
stacks anyway but they can be apart of plain stacks such as the ones
prefixes to console logs or printed by error dialogs.

This lets us cut off any React internals below. This should really be
possible using just ignore listing too ideally.

At this point we should maybe just build a Babel plugin that lets us
annotate a function to need to have this name.

DiffTrain build for commit https://github.com/facebook/react/commit/da4abf0047cf6dc6d9bff505bd93815264c8c3b7.
2024-07-23 15:54:36 -07:00
eps1lon 8f1a56e603 Log Fragment name when trying to render a lazy fragment (#30372)
DiffTrain build for commit https://github.com/facebook/react/commit/9cc0f6e68de2b83b11d1fb2b514d2f508c2da6f7.
2024-07-23 10:07:58 -07:00
kassens 3e6614efa7 [BE] upgrade prettier to 3.3.3 (#30420)
Mostly just changes in ternary formatting.

DiffTrain build for commit https://github.com/facebook/react/commit/b7e7f1a3fab87e8fc19e86a8088a9e0fe4710973.
2024-07-22 13:16:06 -07:00
kassens 24e446f038 Set enableFastJSX flag to true (#30343)
When these to diffs are landed, we can merge this

- [x] D59772879
- [x] D59773043

DiffTrain build for commit https://github.com/facebook/react/commit/d025ddd3b954dfc52ad7e6a036913946a8ca2644.
2024-07-22 08:55:34 -07:00
sebmarkbage 716cb62466 Tag all user space call sites with the "react-stack-bottom-frame" name (#30369)
Ideally we wouldn't need to filter out React internals and it'd just be
covered by ignore listing by any downstream tool. E.g. a framework using
captureOwnerStack could have its own ignore listing. Printed owner
stacks would get browser source map ignore-listing. React DevTools could
have its own ignore list for internals. However, it's nice to be able to
provide nice owner stacks without a bunch of noise by default.
Especially on the server since they have to be serialized.

We currently call each function that calls into user space and track its
stack frame. However, this needs code for checking each one and doesn't
let us work across bundles.

Instead, we can name each of these frame something predictable by giving
the function a name.

Unfortunately, it's a common practice to rename functions or inline them
in compilers. Even if we didn't, others downstream from us or a dev-mode
minifier could. I use this `.bind()` trick to avoid minifying these
functions and ensure they get a unique name added to them in all
browsers. It's not 100% fool proof since a smart enough compiler could
also discover that the `this` value is not used and strip out the
function and then inline it but nobody does this yet at least.

This lets us find the bottom stack easily from stack traces just by
looking for the name.

DiffTrain build for commit https://github.com/facebook/react/commit/792f1921145e51bd06b836ffa0a16ecc39c8ee82.
2024-07-22 07:52:52 -07:00
kassens 0c7969e88f [native-fb] set disableDefaultPropsExceptForClasses flag to true (#30339)
Reflecting D59402048

DiffTrain build for commit https://github.com/facebook/react/commit/1d5a208fda6064022d25204ee47da29a3229648f.
2024-07-15 11:26:30 -07:00
dmytrorykun 7e80855357 Fix fastAddProperties to properly nullify style props (#30334)
## Summary

This PR fixes the `fastAddProperties` function. Now it nullifies a prop
if it was defined in one of the items of a style array, but then set to
`undefined` or `null` in one of the subsequent items. E.g. `style:
[{top: 0}, {top: undefined}]` should evaluate to `{top: null}`. Also
added a test case for that.

## How did you test this change?
```
yarn test packages/react-native-renderer -r=xplat --variant=false
yarn test packages/react-native-renderer -r=xplat --variant=true
yarn flow native
```

DiffTrain build for commit https://github.com/facebook/react/commit/f510ece86d4621d3b0faf9fe59d850f7807dbb16.
2024-07-15 09:38:05 -07:00
kassens 7d4aaba495 [native-fb] set consoleManagedByDevToolsDuringStrictMode flag to true (#30338)
Reflecting D59232098.

DiffTrain build for commit https://github.com/facebook/react/commit/fc1371f6bf656821e92c3c41bf65f58686504001.
2024-07-15 09:36:09 -07:00
sebmarkbage e7770a1921 Disable consoleWithStackDev Transform except in RN/WWW (#30313)
Stacked on #30308.

This is now a noop module so we can stop applying the transform of
console.error using the Babel plugin in the mainline builds. I'm keeping
the transform for RN/WWW for now although it might be nice if the
transform moved into those systems as it gets synced instead of keeping
it upstream.

In jest tests we're already not running the forks for RN/WWW so we don't
need it at all there.

DiffTrain build for commit https://github.com/facebook/react/commit/ff89ba734668fdac06e8de476486830bbf9e0785.
2024-07-12 11:44:31 -07:00
poteto 981fe2b1a3 [RN] Set enableOwnerStacks and enableUseDeferredValueInitialArg to false
In www, the experimental versions get a .modern.js or .classic.js prefix
and get copied into the same folder. In RN, they don't seem to have
.modern.js and .classic.js versions so they end up getting the same
name.

sebmarkbage's theory is that what happens is that they then override
the file that was already there. So depending on if experimental or
stable build finishes first you get a different version at the end.

It doesn't make sense to use `__EXPERIMENTAL__` for flags in native-fb
since there's no modern/classic split there. So that flag should just be
hardcoded to true or false and then it doesn't matter which one finishes
first.

We don't support experimental builds in OSS RN neither so the same thing
could happen with
[`enableOwnerStacks`](https://github.com/facebook/react/blob/5dcf3ca8d45a276a8b4cee0cedd234967661ca35/packages/shared/forks/ReactFeatureFlags.native-oss.js#L60).

You can see that the build errors in the previous PR but passes after
these flag changes.

ghstack-source-id: d10f37bcea
Pull Request resolved: https://github.com/facebook/react/pull/30322

DiffTrain build for commit https://github.com/facebook/react/commit/ff3f1fac65e7b82efe3f90af42af1278bc6f1d5d.
2024-07-12 16:17:19 +00:00
sebmarkbage 1c54b5df84 Remove top stack frame from getCurrentStack (#30306)
The full stack is the current execution stack (`new Error().stack`) +
the current owner stack (`React.captureOwnerStack()`).

The idea with the top frame was that when we append it to console.error
we'd include both since otherwise the true reason would be obscured
behind the little `>` to expand. So we'd just put both stack front and
center. By adding this into getCurrentStack it was easy to use the same
filtering. I never implemented in Fizz or Flight though.

However, with the public API `React.captureOwnerStack()` it's not
necessary to include the current stack since you already have it and
you'd have filtering capabilities in user space too.

Since I'm removing the component stacks from React itself we no longer
need this. It's expected that maybe RDT or framework polyfill would
include this same technique though.

DiffTrain build for commit https://github.com/facebook/react/commit/433068eece2071a96de98b60f99ce6a9121a629c.
2024-07-11 22:39:31 +00:00
rozele fc516e2511 Updates ViewConfig types to delegate isInAParentText context (#29872)
<!--
  Thanks for submitting a pull request!
We appreciate you spending the time to work on these changes. Please
provide enough information so that others can review your pull request.
The three fields below are mandatory.

Before submitting a pull request, please make sure the following is
done:

1. Fork [the repository](https://github.com/facebook/react) and create
your branch from `main`.
  2. Run `yarn` in the repository root.
3. If you've fixed a bug or added code that should be tested, add tests!
4. Ensure the test suite passes (`yarn test`). Tip: `yarn test --watch
TestName` is helpful in development.
5. Run `yarn test --prod` to test in the production environment. It
supports the same options as `yarn test`.
6. If you need a debugger, run `yarn test --debug --watch TestName`,
open `chrome://inspect`, and press "Inspect".
7. Format your code with
[prettier](https://github.com/prettier/prettier) (`yarn prettier`).
8. Make sure your code lints (`yarn lint`). Tip: `yarn linc` to only
check changed files.
  9. Run the [Flow](https://flowtype.org/) type checks (`yarn flow`).
  10. If you haven't already, complete the CLA.

Learn more about contributing:
https://reactjs.org/docs/how-to-contribute.html
-->

## Summary

<!--
Explain the **motivation** for making this change. What existing problem
does the pull request solve?
-->

Now that HostContext determination for Fabric is a DEV-only behavior, we
can move the HostContext determination to resolve from the ViewConfig
for a given type. Doing this will allow arbitrary types to register
themselves as potential parents of raw text string children. This is the
first of two diffs for react as we'll:

1. Add the new property to the ViewConfig types
2. Update React Native to include the `supportsRawText` property for
`RCTText`, `RCTVirtualText`, `AndroidTextInput`, etc.
3. Switch the behavior of react to read from the ViewConfig rather than
a static list of types.

## How did you test this change?

<!--
Demonstrate the code is solid. Example: The exact commands you ran and
their output, screenshots / videos if the pull request changes the user
interface.
How exactly did you verify that your PR solves the issue you wanted to
solve?
  If you leave this empty, your PR will very likely be closed.
-->

- yarn test
- yarn test --prod
- Pulled change into react-native, added `supportsRawText` props to
RCTText, RCTVirtualText, etc. ViewConfigs and confirmed everything type
checks.

DiffTrain build for commit https://github.com/facebook/react/commit/a5cc797b8801dfe58c7a34c99a9fa60c6c9c8274.
2024-07-11 16:52:24 +00:00
sebmarkbage 106b53a5b4 Override the getCurrentStack temporarily while printing uncaught errors (#30309)
This is just a follow up to #30300.

I forgot the uncaught branch.

DiffTrain build for commit https://github.com/facebook/react/commit/29552c7907230222acd3f2c586784d24f9da6200.
2024-07-10 21:04:32 +00:00
kassens 1d800dfda1 Experiment with using an object literal for Fiber creation (#28734)
Object literals should be faster at least on React Native with Hermes as
the JS engine.
It might also be interesting to confirm the old comments in this file
from years ago are even still valid. Creating an object from a literal
should be a simpler operation.

It's a bit unfortunate that this introduces a bunch of copied code, but
since we rearely update the fields on fibers, this seems like an okay
tradeoff for a hot code path. An alternative would be some sort of macro
system, but that doesn't seem worth the extra complexity.

DiffTrain build for commit https://github.com/facebook/react/commit/fe9828954adcc51aa2bd21fe53d969a44dd3c9d2.
2024-07-10 20:48:04 +00:00
sebmarkbage 6ba6b8bb57 Add RN fork of consoleWithStackDev so we can improve the mainline one (#30305)
We're removing this wrapper from the mainline but RN is still using
component stacks to filter out warnings.

This is unfortunate since it'll be hard to keep track of the interplay
with these, DevTools and how you're supposed to implement error dialogs
in userspace.

DiffTrain build for commit https://github.com/facebook/react/commit/9647333b3d5a5d2a3ca7fe2a78d2d3da24bc4984.
2024-07-10 17:42:47 +00:00
sebmarkbage 4cf7148077 Format DOM Nesting Warning as Diff View + An Additional Log for Stack Trace (#30302)
Currently we're printing parent stacks at the end of DOM nesting even
with owner stacks enabled. That's because the context of parent tree is
relevant for determining why two things are nested. It might not be
sufficient to see the owner stack alone.

I'm trying to get rid of parent stacks and rely on more of the plain
owner stacks or ideally console.createTask. These are generally better
anyway since the exact line for creating the JSX is available. It also
lets you find a parent stack frame that is most relevant e.g. if it's
hidden inside internals.

For DOM nesting there's really only two stacks that are relevant. The
creation of the parent and the creation of the child. Sometimes they're
close enough to be the same thing. Such as for parents that can't have
text children or when the ancestor is the direct parent created at the
same place (same owner).

Sometimes they're far apart. In this case I add a second console.error
within the context of the ancestor. That way the second stack trace can
be used to read the stack trace for where it was created.

To preserve some parent context I now print the parent stack in a diff
view format using the logic from hydration diffs. This includes some
siblings and props for context.

<img width="756" alt="Screenshot 2024-07-10 at 12 21 38 AM"
src="https://github.com/facebook/react/assets/63648/0843133d-cc7a-4ecc-91c0-f46ae8e99f20">

Text Nodes:

<img width="749" alt="Screenshot 2024-07-10 at 12 37 40 AM"
src="https://github.com/facebook/react/assets/63648/ee377d82-54ee-450a-99d1-fcc3ef290d59">

---------

Co-authored-by: tjallingt <tjallingt@gmail.com>

DiffTrain build for commit https://github.com/facebook/react/commit/2d3f81bb6a650386832d885d7b63a7d0d517ba15.
2024-07-10 16:22:12 +00:00
kassens e3a4a13a69 Warn about legacy context when legacy context is not disabled (#30297)
For environments that still have legacy contexts available, this adds a
warning to make the remaining call sites easier to locate and encourage
upgrades.

DiffTrain build for commit https://github.com/facebook/react/commit/378b305958eb7259cacfce8ad0e66eec07e07074.
2024-07-10 15:57:52 +00:00
sebmarkbage 517d6b2f7c [Fiber] Override the getCurrentStack temporarily while printing errors (#30300)
Only for parent stacks. This ensures that we can use the regular
mechanism for appending stack traces. E.g. you can polyfill it.

This is mainly so that I can later remove the automatic appending.

DiffTrain build for commit https://github.com/facebook/react/commit/3b2e5f27c5b72708677da27779852b9aa83ef909.
2024-07-10 04:21:43 +00:00
sebmarkbage 4713b085f2 [Flight] Serialize rate limited objects in console logs as marker an increase limit (#30294)
This marker can then be emitted as a getter. When this object gets
accessed we use a special error to let the user know what is going on.

<img width="1350" alt="Screenshot 2024-07-08 at 10 13 46 PM"
src="https://github.com/facebook/react/assets/63648/e3eb698f-e02d-4394-a051-ba9ac3236480">

When you click the `...`:
<img width="1357" alt="Screenshot 2024-07-08 at 10 13 56 PM"
src="https://github.com/facebook/react/assets/63648/4b8ce1cf-d762-49a4-97b9-aeeb1aa8722c">

I also increased the object limit in console logs. It was arbitrarily
set very low before.

These limits are per message. So if you have a loop of many logs it can
quickly add up a lot of strain on the server memory and the client. This
is trying to find some tradeoff. Unfortunately we don't really do much
deduping in these logs so with cyclic objects it ends up maximizing the
limit and then siblings aren't logged.

Ideally we should be able to lazy load them but that requires a lot of
plumbing to wire up so if we can avoid it we should try to. If we want
to that though one idea is to use the getter to do a sync XHR to load
more data but the server needs to retain the objects in memory for an
unknown amount of time. The client could maybe send a signal to retain
them until a weakref clean up but even then it kind of needs a heartbeat
to let the server know the client is still alive. That's a lot of
complexity. There's probably more we can do to optimize deduping and
other parts of the protocol to make it possible to have even higher
limits.

DiffTrain build for commit https://github.com/facebook/react/commit/14fdd0e21c420deb4bb96fc1e9021b531543d15a.
2024-07-10 04:21:30 +00:00
kassens 468daf193a Remove propTypes on instance warning (#30296)
`propTypes` are no longer supported at all in React 19, remove this
outdated warning.

DiffTrain build for commit https://github.com/facebook/react/commit/ba95cf4b8f39acfd7c0ccf2795a19430d35ea6b3.
2024-07-09 17:35:45 +00:00
sebmarkbage ff1f53f34b Warn for useFormState on initial render (#30292)
This was missed in the mount dev dispatcher. It was only in the rerender
dispatcher which means that it was only logged during the rerender.
Since DevTools can hide logs during rerenders, this hid the warning in
StrictMode.

DiffTrain build for commit https://github.com/facebook/react/commit/274c980c535bb34e17f5d97cc22ef4dd296ab413.
2024-07-08 20:50:19 +00:00
sebmarkbage e99785f305 Add unknown location information to component stacks (#30290)
This is the same change as in #30289 but for the main runtime - e.g.
parent stacks in errorInfo.componentStack, appended stacks to
console.error coming from React itself and when we add virtual frames to
owner stacks.

Since we don't add location information these frames look weird to some
stack parsers - such as the native one. This is an existing issue when
you want to use some off-the-shelf parsers to parse production component
stacks for example.

While we won't add Error objects to logs ourselves necessarily, some
third party could want to do the same thing we do in DevTools and so we
should provide the same capability to just take this trace and print it
using an Error object.

DiffTrain build for commit https://github.com/facebook/react/commit/df783f9ea1b6f95e05f830602da1de5ffb325d30.
2024-07-08 16:00:17 +00:00
sebmarkbage 9187f28cf9 Only build react-html in experimental channel (#30129)
Even though the whole package is private right now. Once we publish it,
it'll likely be just the experimental channel first before upgrading to
stable.

This means it gets excluded from the built packages.

DiffTrain build for commit https://github.com/facebook/react/commit/58af67a8f8761e56b5d02486a304c96edc547760.
2024-06-28 14:24:03 +00:00
sebmarkbage 2387b495d5 Add renderToMarkup for Client Components (#30121)
Follow up to #30105.

This supports `renderToMarkup` in a non-RSC environment (not the
`react-server` condition).

This is just a Fizz renderer but it errors at runtime when you use
state, effects or event handlers that would require hydration - like the
RSC version would. (Except RSC can give early errors too.)

To do this I have to move the `react-html` builds to a new `markup`
dimension out of the `dom-legacy` dimension so that we can configure
this differently from `renderToString`/`renderToStaticMarkup`.
Eventually that dimension can go away though if deprecated. That also
helps us avoid dynamic configuration and we can just compile in the
right configuration so the split helps anyway.

One consideration is that if a compiler strips out useEffects or inlines
initial state from useState, then it would not get called an the error
wouldn't happen. Therefore to preserve semantics, a compiler would need
to inject some call that can check the current renderer and whether it
should throw.

There is an argument that it could be useful to not error for these
because it's possible to write components that works with SSR but are
just optionally hydrated. However, there's also an argument that doing
that silently is too easy to lead to mistakes and it's better to error -
especially for the e-mail use case where you can't take it back but you
can replay a queue that had failures. There are other ways to
conditionally branch components intentionally. Besides if you want it to
be silent you can still use renderToString (or better yet
renderToReadableStream).

The primary mechanism is the RSC environment and the client-environment
is really the secondary one that's only there to support legacy
environments. So this also ensures parity with the primary environment.

DiffTrain build for commit https://github.com/facebook/react/commit/1e241f9d6c5f7d0e875b19a99c83cd6197fa62f7.
2024-06-28 13:31:00 +00:00
sebmarkbage 0ee0a32085 Warn for invalid type in renderer with the correct RSC stack (#30102)
This is all behind the `enableOwnerStacks` flag.

This is a follow up to #29088. In that I moved type validation into the
renderer since that's the one that knows what types are allowed.
However, I only removed it from `React.createElement` and not the JSX
which was an oversight.

However, I also noticed that for invalid types we don't have the right
stack trace for throws because we're not yet inside the JSX element that
itself is invalid. We should use its stack for the stack trace. That's
the reason it's enough to just use the throw now because we can get a
good stack trace from the owner stack. This is fixed by creating a fake
Throw Fiber that gets assigned the right stack.

Additionally, I noticed that for certain invalid types like the most
common one `undefined` we error in Flight so a missing import in RSC
leads to a generic error. Instead of erroring on the Flight side we
should just let anything that's not a Server Component through to the
client and then let the Client renderer determine whether it's a valid
type or not. Since we now have owner stacks through the server too, this
will still be able to provide a good stack trace on the client that
points to the server in that case.

<img width="571" alt="Screenshot 2024-06-25 at 6 46 35 PM"
src="https://github.com/facebook/react/assets/63648/6812c24f-e274-4e09-b4de-21deda9ea1d4">

To get the best stack you have to expand the little icon and the regular
stack is noisy [due to this Chrome
bug](https://issues.chromium.org/issues/345248263) which makes it a
little harder to find but once that's fixed it might be easier.

DiffTrain build for commit https://github.com/facebook/react/commit/e02baf6c92833a0d45a77fb2e741676f393c24f7.
2024-06-27 16:16:07 +00:00
sebmarkbage 54bd813aab Add new package with renderToMarkup export (#30105)
Name of the package is tbd (straw: `react-html`). It's a new package
separate from `react-dom` though and can be used as a standalone package
- e.g. also from a React Native app.

```js
import {renderToMarkup} from '...';
const html = await renderToMarkup(<Component />);
```

The idea is that this is a helper for rendering HTML that is not
intended to be hydrated. It's primarily intended to support a subset of
HTML that can be used as embedding and not served as HTML documents from
HTTP. For example as e-mails or in RSS/Atom feeds or other
distributions. It's a successor to `renderToStaticMarkup`.

A few differences:

- This doesn't support "Client Components". It can only use the Server
Components subset. No useEffect, no useState etc. since it will never be
hydrated. Use of those are errors.
- You also can't pass Client References so you can't use components
marked with `"use client"`.
- Unlike `renderToStaticMarkup` this does support async so you can
suspend and use data from these components.
- Unlike `renderToReadableStream` this does not support streaming or
Suspense boundaries and any error rejects the promise. Since there's no
feasible way to "client render" or patch up the document.
- Form Actions are not supported since in an embedded environment
there's no place to post back to across versions. You can render plain
forms with fixed URLs though.
- You can't use any resource preloading like `preload()` from
`react-dom`.

## Implementation

This first version in this PR only supports Server Components since
that's the thing that doesn't have an existing API. Might add a Client
Components version later that errors.

We don't want to maintain a completely separate implementation for this
use case so this uses the `dom-legacy` build dimension to wire up a
build that encapsulates a Flight Server -> Flight Client -> Fizz stream
to render Server Components that then get SSR:ed.

There's no problem to use a Flight Client in a Server Component
environment since it's already supported for Server-to-Server. Both of
these use a bundler config that just errors for Client References though
since we don't need any bundling integration and this is just a
standalone package.

Running Fizz in a Server Component environment is a problem though
because it depends on "react" and it needs the client version.
Therefore, for this build we embed the client version of "react" shared
internals into the build. It doesn't need anything to be able to use
those APIs since you can't call the client APIs anyway.

One unfortunate thing though is that since Flight currently needs to go
to binary and back, we need TextEncoder/TextDecoder to be available but
this shouldn't really be necessary. Also since we use the legacy stream
config, large strings that use byteLengthOfChunk errors atm. This needs
to be fixed before shipping. I'm not sure what would be the best
layering though that isn't unnecessarily burdensome to maintain. Maybe
some kind of pass-through protocol that would also be useful in general
- e.g. when Fizz and Flight are in the same process.

---------

Co-authored-by: Sebastian Silbermann <silbermann.sebastian@gmail.com>

DiffTrain build for commit https://github.com/facebook/react/commit/ffec9ec5b5c846f61d7b40e92f138e2a7b34f273.
2024-06-27 16:14:32 +00:00
yungsters 76e582332d Enable enableDeferRootSchedulingToMicrotask and enableInfiniteRenderLoopDetection for React Native (Meta) (#30090)
DiffTrain build for commit https://github.com/facebook/react/commit/ef0f44ecffc560011f4e7d2f610176231ecc8bb2.
2024-06-26 15:56:15 +00:00