Mirror of upstream PR #35708#737
Open
kushxg wants to merge 982 commits into
Open
Conversation
This is an aesthetic thing. Most simple I/O entries are things like "script", "stylesheet", "fetch" etc. which are all a single word and lower case. The "RSC stream" name sticks out and draws unnecessary attention to itself where as it's really the least interesting to look at. I don't love the name because I'm not sure how to explain it. It's really mainly the byte size of the payload itself without considering things like server awaits things which will have their own cause. So I'm trying to communicate the download size of the stream of downloading the `.rsc` file or the `"rsc stream"`.
…4913) This has been causing some issues with the submission review on Firefox store: we use OS-level paths in these source maps, which makes the build artifact different from the one that's been submitted. Also saves ~100Kb for main.js artifact.
…it hash (react#34915) This eliminates the gap in a reproducer for the React DevTools browser extension from the source code that we submit to Firefox extension stores. We use the commit hash as part of the Backend version, here: https://github.com/facebook/react/blob/2cfb221937eac48209d01d5dda5664de473b1953/packages/react-devtools-extensions/utils.js#L26-L38 The problem is that we archive the source code for Mozilla extension store reviews and there is no git. But since we still download the React sources from the CI, we could reuse the hash from `build/COMMIT_HASH` file.
…eact#34904) Within a function expression local variables may use StoreContext for local context variables, so the reassignment check here was firing too often. We should only report an error for variables that are declared outside the function, ie part of its `context`. --- [//]: # (BEGIN SAPLING FOOTER) Stack created with [Sapling](https://sapling-scm.com). Best reviewed with [ReviewStack](https://reviewstack.dev/facebook/react/pull/34904). * react#34903 * __->__ react#34904
Full list of changes: * Text layout fixes for stack traces with badges ([eps1lon](https://github.com/eps1lon) in [react#34925](react#34925)) * chore: read from build/COMMIT_SHA fle as fallback for commit hash ([hoxyq](https://github.com/hoxyq) in [react#34915](react#34915)) * fix: dont ship source maps for css in prod builds ([hoxyq](https://github.com/hoxyq) in [react#34913](react#34913)) * Lower case "rsc stream" debug info ([sebmarkbage](https://github.com/sebmarkbage) in [react#34921](react#34921)) * BuiltInCallSite should have padding-left ([sebmarkbage](https://github.com/sebmarkbage) in [react#34922](react#34922)) * Show the Suspense boundary name in the rect if there's no overlap ([sebmarkbage](https://github.com/sebmarkbage) in [react#34918](react#34918)) * Don't attach filtered IO to grandparent Suspense ([eps1lon](https://github.com/eps1lon) in [react#34916](react#34916)) * Infer name from stack if it's the generic "lazy" name ([sebmarkbage](https://github.com/sebmarkbage) in [react#34907](react#34907)) * Use same Suspense naming heuristics when reconnecting ([eps1lon](https://github.com/eps1lon) in [react#34898](react#34898)) * Assign a different color and label based on environment ([sebmarkbage](https://github.com/sebmarkbage) in [react#34893](react#34893)) * Compute environment names for the timeline ([sebmarkbage](https://github.com/sebmarkbage) in [react#34892](react#34892)) * Don't highlight the root rect if no roots has unique suspenders ([sebmarkbage](https://github.com/sebmarkbage) in [react#34885](react#34885)) * Highlight the rect when the corresponding timeline bean is hovered ([sebmarkbage](https://github.com/sebmarkbage) in [react#34881](react#34881)) * Repeat the "name" if there's no short description in groups ([sebmarkbage](https://github.com/sebmarkbage) in [react#34894](react#34894)) * Tweak the rects design and create multi-environment color scheme ([sebmarkbage](https://github.com/sebmarkbage) in [react#34880](react#34880)) * Adjust the rects size by one pixel smaller ([sebmarkbage](https://github.com/sebmarkbage) in [react#34876](react#34876)) * Remove steps title from scrubber ([sebmarkbage](https://github.com/sebmarkbage) in [react#34878](react#34878)) * Include some sub-pixel precision in rects ([sebmarkbage](https://github.com/sebmarkbage) in [react#34873](react#34873)) * Don't pluralize if already plural ([sebmarkbage](https://github.com/sebmarkbage) in [react#34870](react#34870)) * Don't try to load anonymous or empty urls ([sebmarkbage](https://github.com/sebmarkbage) in [react#34869](react#34869)) * Add inspection button to Suspense tab ([sebmarkbage](https://github.com/sebmarkbage) in [react#34867](react#34867)) * Don't select on hover ([sebmarkbage](https://github.com/sebmarkbage) in [react#34860](react#34860)) * Don't highlight on timeline ([sebmarkbage](https://github.com/sebmarkbage) in [react#34861](react#34861)) * The bridge event types should only be defined in one direction ([sebmarkbage](https://github.com/sebmarkbage) in [react#34859](react#34859)) * Attempt at a better "unique suspender" text ([sebmarkbage](https://github.com/sebmarkbage) in [react#34854](react#34854)) * Track whether a boundary is currently suspended and make transparent ([sebmarkbage](https://github.com/sebmarkbage) in [react#34853](react#34853)) * Don't hide overflow rectangles ([sebmarkbage](https://github.com/sebmarkbage) in [react#34852](react#34852)) * Measure text nodes ([sebmarkbage](https://github.com/sebmarkbage) in [react#34851](react#34851)) * Don't measure fallbacks when suspended ([sebmarkbage](https://github.com/sebmarkbage) in [react#34850](react#34850)) * Filter out built-in stack frames ([sebmarkbage](https://github.com/sebmarkbage) in [react#34828](react#34828)) * Exclude Suspense boundaries in hidden Activity ([eps1lon](https://github.com/eps1lon) in [react#34756](react#34756)) * Group consecutive suspended by rows by the same name ([sebmarkbage](https://github.com/sebmarkbage) in [react#34830](react#34830)) * Preserve the original index when sorting suspended by ([sebmarkbage](https://github.com/sebmarkbage) in [react#34829](react#34829)) * Don't show the root as being non-compliant ([sebmarkbage](https://github.com/sebmarkbage) in [react#34827](react#34827)) * Ignore suspense boundaries, without visual representation, in the timeline ([sebmarkbage](https://github.com/sebmarkbage) in [react#34824](react#34824)) * Explicitly say which id to scroll to and only once ([sebmarkbage](https://github.com/sebmarkbage) in [react#34823](react#34823)) * devtools: fix ellipsis truncation for key values ([sophiebits](https://github.com/sophiebits) in [react#34796](react#34796)) * fix(devtools): remove duplicated "Display density" field in General settings ([Anatole-Godard](https://github.com/Anatole-Godard) in [react#34792](react#34792)) * Gate SuspenseTab ([hoxyq](https://github.com/hoxyq) in [react#34754](react#34754)) * Release `<ViewTransition />` to Canary ([eps1lon](https://github.com/eps1lon) in [react#34712](react#34712))
<img width="521" height="365" alt="Screenshot 2025-10-20 at 11 53 50 AM" src="https://github.com/user-attachments/assets/1a073c09-d440-4498-b2b3-c0dcb2272c96" />
We have a whole ton of compiler errors due to us using a helper to
return breakpoints for CSS-in-js, which results in code like:
```
const styles = {
[responsive.up('xl')]: { ... }
}
```
this results in TONS of bailouts due to `(BuildHIR::lowerExpression)
Expected Identifier, got CallExpression key in ObjectExpression`.
I was looking into what it would take to fix it and why we don't allow
it, and following the paper trail is seems like the gotchas have been
fixed with the new mutability aliasing model that is fully rolled out.
It looks like this is the same pattern/issue that was fixed (see
https://github.com/facebook/react/blob/main/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-object-expression-computed-key-modified-during-after-construction-hoisted-sequence-expr.js
and the old bug in
https://github.com/facebook/react/blob/d58c07b563a79bd706531278cb4afec6292b84a8/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-object-expression-computed-key-modified-during-after-construction-hoisted-sequence-expr.expect.md).
@josephsavona can you confirm if that's the case and if we're able to
drop this restriction now? (or alternatively, is there another case we
can ignore?)
…4932) Few examples of using `useSyncExternalStore` that can be useful for debugging hook tree reconstruction logic and hook names parsing feature.
…ct#34547) ## Summary This PR updates getChangedHooksIndices to account for the fact that useSyncExternalStore internally mounts two hooks, while DevTools should treat it as a single user-facing hook. It introduces a helper isUseSyncExternalStoreHook to detect this case and adjust iteration so the extra internal hook is skipped when counting changes. Before: https://github.com/user-attachments/assets/0db72a4e-21f7-44c7-ba02-669a272631e5 After: https://github.com/user-attachments/assets/4da71392-0396-408d-86a7-6fbc82d8c4f5 ## How did you test this change? I used this component to reproduce this issue locally (I followed instructions in `packages/react-devtools/CONTRIBUTING.md`). ```ts function Test() { // 1 React.useSyncExternalStore( () => {}, () => {}, () => {}, ); // 2 const [state, setState] = useState('test'); return ( <> <div onClick={() => setState(Math.random())} style={{backgroundColor: 'red'}}> {state} </div> </> ); } ```
Fixes a few small things: - Update imports to reference root babel-plugin-react-compiler rather than from `[...]/src/...` - Remove unused cosmiconfig options parsing for now - Update type exports in babel-plugin-react-compiler accordingly
) <!-- 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? --> Resolve the type error with the types, according to [Are the types wrong?](https://arethetypeswrong.github.io/?p=eslint-plugin-react-hooks%407.0.0), as an additional - Last attempt: react#34746 - Original issue: react#34745 ## How did you test this change? I edited `node_modules/eslint-plugin-react-hooks/index.d.ts` in my `"module": "Node16"` + `"type": "module"` project and my error went away: - react#34801 (comment) cc @poteto @michaelfaith @andrewbranch <!-- 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. -->
Addresses react#34801 where `configs.flat` is possibly undefined as it was typed as a record of arbitrary string keys. <img width="990" height="125" alt="Screenshot 2025-10-22 at 1 16 44 PM" src="https://github.com/user-attachments/assets/8b0d37b9-d7b0-4fc0-aa62-1b0968dae75f" />
…pes (react#34951) <!-- 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? --> Fix the runtime error with named imports and make the last remaining [Are The Types Wrong?](https://arethetypeswrong.github.io/?p=eslint-plugin-react-hooks%400.0.0-experimental-6b344c7c-20251022) error with `eslint-plugin-react-hooks` go away, thanks to the hint from @andrewbranch: - react#34801 (comment) ## 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. --> I tried adding this to `node_modules` and it fixed the failures when importing named imports like `import { configs, meta, rules } from 'eslint-plugin-react-hooks'`: ```bash ➜ eslint-config-upleveled git:(renovate/react-monorepo) pnpm eslint . --max-warnings 0 Oops! Something went wrong! :( ESLint: 9.37.0 file:///Users/k/p/eslint-config-upleveled/index.js:13 import reactHooks, { configs } from 'eslint-plugin-react-hooks'; ^^^^^^^ SyntaxError: Named export 'configs' not found. The requested module 'eslint-plugin-react-hooks' is a CommonJS module, which may not support all module.exports as named exports. CommonJS modules can always be imported via the default export, for example using: import pkg from 'eslint-plugin-react-hooks'; const { configs } = pkg; at ModuleJob._instantiate (node:internal/modules/esm/module_job:228:21) at async ModuleJob.run (node:internal/modules/esm/module_job:335:5) at async onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:647:26) at async dynamicImportConfig (/Users/k/p/eslint-config-upleveled/node_modules/.pnpm/eslint@9.37.0/node_modules/eslint/lib/config/config-loader.js:186:17) at async loadConfigFile (/Users/k/p/eslint-config-upleveled/node_modules/.pnpm/eslint@9.37.0/node_modules/eslint/lib/config/config-loader.js:276:9) at async ConfigLoader.calculateConfigArray (/Users/k/p/eslint-config-upleveled/node_modules/.pnpm/eslint@9.37.0/node_modules/eslint/lib/config/config-loader.js:589:23) at async #calculateConfigArray (/Users/k/p/eslint-config-upleveled/node_modules/.pnpm/eslint@9.37.0/node_modules/eslint/lib/config/config-loader.js:743:23) at async directoryFilter (/Users/k/p/eslint-config-upleveled/node_modules/.pnpm/eslint@9.37.0/node_modules/eslint/lib/eslint/eslint-helpers.js:309:5) at async NodeHfs.<anonymous> (file:///Users/k/p/eslint-config-upleveled/node_modules/.pnpm/@HumanFS+core@0.19.1/node_modules/@humanfs/core/src/hfs.js:586:29) at async NodeHfs.walk (file:///Users/k/p/eslint-config-upleveled/node_modules/.pnpm/@HumanFS+core@0.19.1/node_modules/@humanfs/core/src/hfs.js:614:3) ➜ eslint-config-upleveled git:(renovate/react-monorepo) pnpm eslint . --max-warnings 0 ➜ eslint-config-upleveled git:(renovate/react-monorepo) # no error ``` The named imports identifiers `configs`, `meta`, and `rules` also contain values, as a sanity check: - react#34951 (comment) cc @poteto
…pes (react#34953) <!-- 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 --> Supersedes react#34951 ## Summary <!-- Explain the **motivation** for making this change. What existing problem does the pull request solve? --> Fix the runtime error with named imports and make the last remaining [Are The Types Wrong?](https://arethetypeswrong.github.io/?p=eslint-plugin-react-hooks%400.0.0-experimental-6b344c7c-20251022) error with `eslint-plugin-react-hooks` go away, thanks to the hint from Andrew Branch: - react#34801 (comment) ## 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. --> I tried adding this to `node_modules` and it fixed the failures when importing named imports like `import { configs, meta, rules } from 'eslint-plugin-react-hooks'`: ```bash ➜ eslint-config-upleveled git:(renovate/react-monorepo) pnpm eslint . --max-warnings 0 Oops! Something went wrong! :( ESLint: 9.37.0 file:///Users/k/p/eslint-config-upleveled/index.js:13 import reactHooks, { configs } from 'eslint-plugin-react-hooks'; ^^^^^^^ SyntaxError: Named export 'configs' not found. The requested module 'eslint-plugin-react-hooks' is a CommonJS module, which may not support all module.exports as named exports. CommonJS modules can always be imported via the default export, for example using: import pkg from 'eslint-plugin-react-hooks'; const { configs } = pkg; at ModuleJob._instantiate (node:internal/modules/esm/module_job:228:21) at async ModuleJob.run (node:internal/modules/esm/module_job:335:5) at async onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:647:26) at async dynamicImportConfig (/Users/k/p/eslint-config-upleveled/node_modules/.pnpm/eslint@9.37.0/node_modules/eslint/lib/config/config-loader.js:186:17) at async loadConfigFile (/Users/k/p/eslint-config-upleveled/node_modules/.pnpm/eslint@9.37.0/node_modules/eslint/lib/config/config-loader.js:276:9) at async ConfigLoader.calculateConfigArray (/Users/k/p/eslint-config-upleveled/node_modules/.pnpm/eslint@9.37.0/node_modules/eslint/lib/config/config-loader.js:589:23) at async #calculateConfigArray (/Users/k/p/eslint-config-upleveled/node_modules/.pnpm/eslint@9.37.0/node_modules/eslint/lib/config/config-loader.js:743:23) at async directoryFilter (/Users/k/p/eslint-config-upleveled/node_modules/.pnpm/eslint@9.37.0/node_modules/eslint/lib/eslint/eslint-helpers.js:309:5) at async NodeHfs.<anonymous> (file:///Users/k/p/eslint-config-upleveled/node_modules/.pnpm/@HumanFS+core@0.19.1/node_modules/@humanfs/core/src/hfs.js:586:29) at async NodeHfs.walk (file:///Users/k/p/eslint-config-upleveled/node_modules/.pnpm/@HumanFS+core@0.19.1/node_modules/@humanfs/core/src/hfs.js:614:3) ➜ eslint-config-upleveled git:(renovate/react-monorepo) pnpm eslint . --max-warnings 0 ➜ eslint-config-upleveled git:(renovate/react-monorepo) # no error ``` The named imports identifiers `configs`, `meta`, and `rules` also contain values, as a sanity check: - react#34951 (comment) cc @poteto
…#34958) ## Summary This PR addresses a pending TODO comment left in react#34499 https://github.com/facebook/react/blame/eb2f784e752ba690f032db4c3d87daac77a5a2aa/compiler/apps/playground/components/Editor/ConfigEditor.tsx#L37 This change removes the temporary workaround and replaces it with `<Activity>`, as originally intended. ## How did you test this change? - Updated the component to use `<Activity>` directly - Verified the editor renders correctly in both development and production builds. - The `<Activity>` UI updates as expected. https://github.com/user-attachments/assets/ce976123-da59-4579-b063-b308a9167b21
Add changelog entry for 7.0.1 --- [//]: # (BEGIN SAPLING FOOTER) Stack created with [Sapling](https://sapling-scm.com). Best reviewed with [ReviewStack](https://reviewstack.dev/facebook/react/pull/34964). * react#34965 * __->__ react#34964
This was outdated from previously. --- [//]: # (BEGIN SAPLING FOOTER) Stack created with [Sapling](https://sapling-scm.com). Best reviewed with [ReviewStack](https://reviewstack.dev/facebook/react/pull/34965). * __->__ react#34965 * react#34964
…react#34580) Summary: Change error and update snapshots The error now mentions what values are causing the issue which should provide better context on how to fix the issue --- [//]: # (BEGIN SAPLING FOOTER) Stack created with [Sapling](https://sapling-scm.com). Best reviewed with [ReviewStack](https://reviewstack.dev/facebook/react/pull/34580). * __->__ react#34580 * react#34579 * react#34578 * react#34577 * react#34575 * react#34574
…#34963) When a longer function or expression is identified as the source of an error, we currently print the entire expression in our error message. This is because we delegate to a Babel helper to print codeframes. Here, we add some checking and abbreviate the result if it spans too many lines.
Some vulnerabilities were detected in older versions of Playwright, upgrading for the playground.
(disclaimer: I used codex to write this script)
Adds a new `yarn generate-changelog` script to simplify the process of
writing changelogs. You can use it as follows:
```
$ yarn generate-changelog --help
Usage: yarn generate-changelog [--codex|--claude] [--debug] [<pkg@version> ...]
Options:
--codex Use Codex for commit summarization. [boolean]
--claude Use Claude for commit summarization. [boolean]
--debug Enable verbose debug logging. [boolean] [default: false]
-h, --help Show help [boolean]
Examples:
generate-changelog --codex Generate changelog for a single
eslint-plugin-react-hooks@7.0.1 package using Codex.
generate-changelog --claude react@19.3 Generate changelog entries for
react-dom@19.3 multiple packages using Claude.
generate-changelog --codex Generate changelog for all stable
packages using recorded versions.
```
For example, if no args are passed, the script will print find all the
relevant commits affecting packages (defaults to `stablePackages` in
`ReactVersions.js`) and format them as a simple markdown list.
```
$ yarn generate-changelog
## eslint-plugin-react-hooks@7.0.0
* [compiler] improve zod v3 backwards compat (react#34877) ([react#34877](react#34877) by [@henryqdineen](https://github.com/henryqdineen))
* [ESLint] Disallow passing effect event down when inlined as a prop (react#34820) ([react#34820](react#34820) by [@jf-eirinha](https://github.com/jf-eirinha))
* Switch to `export =` to fix eslint-plugin-react-hooks types (react#34949) ([react#34949](react#34949) by [@karlhorky](https://github.com/karlhorky))
* [eprh] Type `configs.flat` more strictly (react#34950) ([react#34950](react#34950) by [@poteto](https://github.com/poteto))
* Add hint for Node.js cjs-module-lexer for eslint-plugin-react-hook types (react#34951) ([react#34951](react#34951) by [@karlhorky](https://github.com/karlhorky))
* Add hint for Node.js cjs-module-lexer for eslint-plugin-react-hook types (react#34953) ([react#34953](react#34953) by [@karlhorky](https://github.com/karlhorky))
// etc etc...
```
If `--codex` or `--claude` is passed, the script will attempt to use
them to summarize the commit(s) in the same style as our existing
CHANGELOG.md.
And finally, for debugging the script you can add `--debug` to see
what's going on.
Now that RN is only on the New Architecture, we can stop stop syncing the legacy React Native renderers. In this diff, I just stop syncing them. In a follow up I'll delete the code for them so only Fabric is left. This will also allow us to remove the `enableLegacyMode` feature flag.
Stacked on react#34946 This should be a noop, now that the legacy renderers are not being sync'd.
Adds a new `--format` option which can be `text` (default), `csv`, or `json`. --- [//]: # (BEGIN SAPLING FOOTER) Stack created with [Sapling](https://sapling-scm.com). Best reviewed with [ReviewStack](https://reviewstack.dev/facebook/react/pull/34992). * react#34993 * __->__ react#34992
Just a light reorganization.
500 tests failed from not using async act. Will fix the tests and then re-land this.
…eact#35003) IO tasks can execute more than once. E.g. a connection may fire each time a new message or chunk comes in or a setInterval every time it executes. We used to treat these all as one I/O node and just updated the end time as we go. Most of the time this was fine because typically you would have a Promise instance whose end time is really the one that gets used as the I/O anyway. However, in a pattern like this it could be problematic: ```js setTimeout(() => { function App() { return Promise.resolve(123); } renderToReadableStream(<App />); }); ``` Because the I/O's end time is before the render started so it should be excluded from being considered I/O as part of the render. It happened outside of render. But because the `Promise.resolve()` is inside render its end time is after the render start so the promise is considered part of the render. This is usually not a problem because the end time of the I/O is still before the start of the render so even though the Promise is valid it has no I/O source so it's properly excluded. However, if the I/O's end time updates before we observe this then the I/O can be considered part of the render. E.g. if this was a setInterval it would be clearly wrong. But it turns out that even setTimeout can sometimes execute more than once in the async_hooks because each run of "process.nextTick" and microtasks respectively are ran in their own before/after. When a micro task executes after this main body it'll update the end time which can then turn the whole I/O as being inside the render. To solve this properly I create a new I/O node each time before() is invoked so that each one gets to observe a different end time. This has a potential CPU and memory allocation cost when there's a lot of them like in a quick stream.
Fixes missing source locations for ReturnStatement nodes in generated ast. Simple change using existing pattern, only required changes to the codegen step, no other pipeline changes. **Most file changes are new lines in generated code.** [First commit](react@d15e90e) has the relevant changes, second commit has the noisy snap updates. I added an exception to the validator to not report an error when a return statement will be optimized to an implicit return by codegen, as there's no separate return statement to instrument anyways in the final ast. An edge case when it comes to preserving source locations for instrumentation that is likely not as common for most babel transforms since they are not doing optimizations.
Adds support for value terminals (optional/logical/ternary/sequence) within try/catch clauses. Try/catch expressions insert maybe-throw terminals after each instruction, but BuildReactiveFunction's value block extraction was not expecting these terminals. The fix is to roughly treat maybe-throw similarly to goto, falling through to the continuation block, but there are a few edge cases to handle. I've also added extensive tests, including testing that errors correctly flow to the catch handler.
Snap now supports subcommands 'test' (default) and 'minimize`. The
minimize subcommand attempts to minimize a single failing input fixture
by incrementally simplifying the ast so long as the same error occurs. I
spot-checked it and it seemed to work pretty well. This is intended for
use in a new subagent designed for investigating bugs — fixture
simplification is an important part of the process and we can automate
this rather than light tokens on fire.
Example Input:
```js
function Component(props) {
const x = [];
let result;
for (let i = 0; i < 10; i++) {
if (cond) {
try {
result = {key: bar([props.cond && props.foo])};
} catch (e) {
console.log(e);
}
}
}
x.push(result);
return <Stringify x={x} />;
}
```
Command output:
```
$ yarn snap minimize --path .../input.js
Minimizing: .../input.js
Minimizing................
--- Minimized Code ---
function Component(props) {
try {
props && props;
} catch (e) {}
}
Reduced from 16 lines to 5 lines
```
This demonstrates things like:
* Removing one statement at at time
* Replacing if/else with the test, consequent, or alternate. Similar for
other control-flow statements including try/catch
* Removing individual array/object expression properties
* Replacing single-value array/object with the value
* Replacing control-flow expression (logical, consequent) w the test or
left/right values
* Removing call arguments
* Replacing calls with a single argument with the argument
* Replacing calls with multiple arguments with an array of the arguments
* Replacing optional member/call with non-optional versions
* Replacing member expression with the object. If computed, also try
replacing w the key
* And a bunch more strategies, see the code
…t#35672) Fixes react#31463, react#30114. When switching between roots in the profiler flamegraph, the commit index was preserved from the previous root. This caused an error "Invalid commit X. There are only Y commits." when the new root had fewer commits than the selected index. This fix resets the commit index to 0 (or null if no commits) when the commitData changes, which happens when switching roots.
react#35598) Currently, IO that finished before the request started is not considered IO: https://github.com/facebook/react/blob/6a0ab4d2dd62dfdf8881ba1c3443c6d5acedc871/packages/react-server/src/ReactFlightServer.js#L5338-L5343 This leads to loss of debug info when a flight stream is deserialized and serialized again. We can solve this by allowing "when the the request started" to be set to a point in the past, when the original stream started by doing ```js const startTime = performance.now() + performance.timeOrigin // ... stuff happens and time passes... ReactServer.renderToReadableStream(..., { startTime }) ```
Allows Server Components to import Context from a `"use client'` module and render its Provider. Only tricky part was that I needed to add `REACT_CONTEXT_TYPE` handling in mountLazyComponent so lazy-resolved Context types can be rendered. Previously only functions, REACT_FORWARD_REF_TYPE, and REACT_MEMO_TYPE were handled. Tested in the Flight fixture. ty bb claude Closes react#35340 --------- Co-authored-by: Sophie Alpert <git@sophiebits.com>
This is a combination of a) a subagent for investigating compiler errors and b) testing that agent by fixing bugs with for loops within try/catch. My recent diffs to support maybe-throw within value blocks was incomplete and handled many cases, like optionals/logicals/etc within try/catch. However, the handling for for loops was making more assumptions and needed additional fixes. Key changes: * `maybe-throw` terminal `handler` is now nullable. PruneMaybeThrows nulls the handler for blocks that cannot throw, rather than changing to a `goto`. This preserves more information, and makes it easier for BuildReactiveFunction's visitValueBlock() to reconstruct the value blocks * Updates BuildReactiveFunction's handling of `for` init/test/update (and similar for `for..of` and `for..in`) to correctly extract value blocks. The previous logic made assumptions about the shape of the SequenceExpression which were incorrect in some cases within try/catch. The new helper extracts a flattened SequenceExpression. Supporting changes: * The agent itself (tested via this diff) * Updated the script for invoking snap to keep `compiler/` as the working directory, allowing relative paths to work more easily * Add an `--update` (`-u`) flag to `yarn snap minimize`, which updates the fixture in place w the minimized version
react#35688) More snap improvements for use with agents: * `yarn snap compile [--debug] <path>` for compiling any file, optionally with debug logs * `yarn snap minimize <path>` now accepts path as a positional param for consistency w 'compile' command * Both compile/minimize commands properly handle paths relative to the compiler/ directory. When using `yarn snap` the current working directory is compiler/packages/snap, but you're generally running it from the compiler directory so this matches expectations of callers better.
* A few new minimization strategies, removing function params and array/object pattern elements * Ensure that we preserve the same set of errors based on not just category+reason but also description.
…react#35377) (react#35419) ## Summary Fix react-hooks/set-state-in-effect false negatives when Hooks are called via a namespace import (e.g. `import * as React from 'react'` and `React.useEffect(...))`. The validation now checks the MethodCall property (the actual hook function) instead of the receiver object. Issue: Bug: react#35377 ## How did you test this change? Added a regression fixture; Ran tests and verified it reports `EffectSetState` and matches the expected output. <img width="461" height="116" alt="Screenshot 2025-12-27 at 14 13 38" src="https://github.com/user-attachments/assets/fff5aab9-0f2c-40e9-a6a5-b864c3fa6fbd" />
Summary:
I noticed there's a bug where the lint will recognize the type on a cast
annotation as a missing dependency;
```
function MyComponent() {
type ColumnKey = 'id' | 'name';
type Item = {id: string, name: string};
const columns = useMemo(
() => [
{
type: 'text',
key: 'id',
} as TextColumn<ColumnKey, Item>,
^^^^^^^^ here
],
[],
);
}
```
This is due to the AST of AsExpressions being something like:
AsExpression
└── typeAnnotation: GenericTypeAnnotation
└── typeParameters: TypeParameterInstantiation
└── params[0]: GenericTypeAnnotation
└── id: Identifier (name: "ColumnKey")
Where `ColumnKey` never has a TypeParameter Annotation. So we need to
consider it to be a flow type due to it belonging to a
GenericTypeAnnotation
Test Plan:
Added unit tests
Before:
```
Test Suites: 1 failed, 2 passed, 3 total
Tests: 2 failed, 5065 passed, 5067 total
Snapshots: 0 total
Time: 16.517 s
Ran all test suites.
error Command failed with exit code 1.
```
After:
```
PASS __tests__/ReactCompilerRuleTypescript-test.ts
PASS __tests__/ESLintRulesOfHooks-test.js (6.192 s)
PASS __tests__/ESLintRuleExhaustiveDeps-test.js (9.97 s)
Test Suites: 3 passed, 3 total
Tests: 5067 passed, 5067 total
Snapshots: 0 total
Time: 10.21 s, estimated 11 s
Ran all test suites.
✨ Done in 12.66s.
```
react#35612) Database libraries like Gel/EdgeDB can create very long linear chains of async sequences through temporal async sequencing in connection pools. The recursive traversal of `node.previous` chains in `visitAsyncNode` causes stack overflow on these deep chains. The fix converts the `previous` chain traversal from recursive to iterative. We collect the chain into an array, then process from deepest to shallowest. The `awaited` traversal remains recursive since its depth is bounded by promise dependency depth, not by the number of event loop turns. Each `awaited` branch still benefits from the iterative `previous` handling within its own traversal. I've verified that this fixes the [repro](https://github.com/jere-co/next-debug) provided in react#35246. closes react#35246
## Overview Adds a feature flag `enableParallelTransitions` to experiment with engantling transitions less often. ## Motivation Currently we over-entangle transition lanes. It's a common misunderstanding that React entangles all transitions, always. We actually will complete transitions independently in many cases. For example, [this codepen](https://codepen.io/GabbeV/pen/pvyKBrM) from [@GabbeV](https://bsky.app/profile/gabbev.bsky.social/post/3m6uq2abihk2x) shows transitions completing independently. However, in many cases we entangle when we don't need to, instead of letting the independent transitons complete independently. We still want to entangle for updates that happen on the same queue. ## Example As an example of what this flag would change, consider two independent counter components: ```js function Counter({ label }) { const [count, setCount] = useState(0); return ( <div> <span>{use(readCache(`${label} ${count}`))} </span> <Button action={() => { setCount((c) => c + 1); }} > Next {label} </Button> </div> ); } ``` ```js export default function App() { return ( <> <Counter label="A" /> <Counter label="B" /> </> ); } ``` ### Before The behavior today is to entange them, meaning they always commit together: https://github.com/user-attachments/assets/adead60e-8a98-4a20-a440-1efdf85b2142 ### After In this experiment, they will complete independently (if they don't depend on each other): https://github.com/user-attachments/assets/181632b5-3c92-4a29-a571-3637f3fab8cd ## Early Research This change is in early research, and is not in the experimental channel. We're going to experiment with this at Meta to understand how much of a breaking change, and how beneficial it is before commiting to shipping it in experimental and beyond.
…eact#35555) Related to react#35548, `enableViewTransition` fixes a bug where `getSnapshotBeforeUpdate` was running in hidden trees when it shouldn't (`componentWillUpdate` won't run for hidden updates, and when it becomes visible it will be called with `componentWillMount`).
Small optimization for useEffectEvent. Not sure we even need a flag for it, but it will be a nice killswitch. As an added benefit, it fixes a bug when `enableViewTransition` is on, where we were not updating the useEffectEvent callback when a tree went from hidden to visible.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
20 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Mirrored from facebook/react PR react#35708