Skip to content

Conversation

@sebmarkbage
Copy link
Collaborator

Similar to how we can include a Promise resolved value we can include Component Props.

For now I left out props for Client Components for perf unless they error. I'll try it for Client Components in general in a separate PR.

Screenshot 2025-06-26 at 5 54 29 PM Screenshot 2025-06-26 at 5 54 12 PM

@github-actions github-actions bot added the React Core Team Opened by a member of the React Core Team label Jun 26, 2025
@react-sizebot
Copy link

react-sizebot commented Jun 26, 2025

Comparing: 4db4b21...c5495b6

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name +/- Base Current +/- gzip Base gzip Current gzip
oss-stable/react-dom/cjs/react-dom.production.js = 6.68 kB 6.68 kB +0.05% 1.83 kB 1.83 kB
oss-stable/react-dom/cjs/react-dom-client.production.js = 530.57 kB 530.57 kB = 93.67 kB 93.67 kB
oss-experimental/react-dom/cjs/react-dom.production.js = 6.69 kB 6.69 kB +0.05% 1.83 kB 1.83 kB
oss-experimental/react-dom/cjs/react-dom-client.production.js = 651.66 kB 651.66 kB = 114.78 kB 114.79 kB
facebook-www/ReactDOM-prod.classic.js = 674.81 kB 674.81 kB = 118.78 kB 118.78 kB
facebook-www/ReactDOM-prod.modern.js = 665.30 kB 665.30 kB = 117.20 kB 117.20 kB
oss-experimental/react-server-dom-esm/cjs/react-server-dom-esm-client.browser.development.js +2.97% 133.56 kB 137.53 kB +1.70% 24.21 kB 24.62 kB
oss-experimental/react-client/cjs/react-client-flight.development.js +2.95% 134.63 kB 138.59 kB +1.62% 23.87 kB 24.26 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-client.browser.development.js +2.94% 134.67 kB 138.64 kB +1.58% 24.23 kB 24.61 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.browser.development.js +2.92% 135.75 kB 139.71 kB +1.65% 24.60 kB 25.00 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js +2.91% 136.31 kB 140.27 kB +1.69% 24.74 kB 25.16 kB
oss-experimental/react-server-dom-esm/cjs/react-server-dom-esm-client.node.development.js +2.88% 137.55 kB 141.52 kB +1.93% 24.82 kB 25.30 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-client.edge.development.js +2.86% 138.84 kB 142.80 kB +1.91% 25.15 kB 25.63 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-client.node.development.js +2.83% 140.09 kB 144.06 kB +1.82% 25.27 kB 25.73 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.edge.development.js +2.79% 141.94 kB 145.90 kB +1.88% 25.63 kB 26.11 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js +2.79% 142.03 kB 145.99 kB +1.87% 25.67 kB 26.15 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.development.js +2.77% 143.02 kB 146.99 kB +1.80% 25.77 kB 26.23 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.unbundled.development.js +2.73% 145.37 kB 149.34 kB +1.78% 26.01 kB 26.47 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.development.js +2.70% 146.71 kB 150.67 kB +1.76% 26.26 kB 26.72 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show
Name +/- Base Current +/- gzip Base gzip Current gzip
oss-experimental/react-server-dom-esm/cjs/react-server-dom-esm-client.browser.development.js +2.97% 133.56 kB 137.53 kB +1.70% 24.21 kB 24.62 kB
oss-experimental/react-client/cjs/react-client-flight.development.js +2.95% 134.63 kB 138.59 kB +1.62% 23.87 kB 24.26 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-client.browser.development.js +2.94% 134.67 kB 138.64 kB +1.58% 24.23 kB 24.61 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.browser.development.js +2.92% 135.75 kB 139.71 kB +1.65% 24.60 kB 25.00 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js +2.91% 136.31 kB 140.27 kB +1.69% 24.74 kB 25.16 kB
oss-experimental/react-server-dom-esm/cjs/react-server-dom-esm-client.node.development.js +2.88% 137.55 kB 141.52 kB +1.93% 24.82 kB 25.30 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-client.edge.development.js +2.86% 138.84 kB 142.80 kB +1.91% 25.15 kB 25.63 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-client.node.development.js +2.83% 140.09 kB 144.06 kB +1.82% 25.27 kB 25.73 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.edge.development.js +2.79% 141.94 kB 145.90 kB +1.88% 25.63 kB 26.11 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js +2.79% 142.03 kB 145.99 kB +1.87% 25.67 kB 26.15 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.development.js +2.77% 143.02 kB 146.99 kB +1.80% 25.77 kB 26.23 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.unbundled.development.js +2.73% 145.37 kB 149.34 kB +1.78% 26.01 kB 26.47 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.development.js +2.70% 146.71 kB 150.67 kB +1.76% 26.26 kB 26.72 kB
oss-experimental/react-server-dom-esm/esm/react-server-dom-esm-client.browser.development.js +1.39% 169.69 kB 172.04 kB +1.14% 38.32 kB 38.75 kB
oss-experimental/react-art/cjs/react-art.development.js +0.82% 677.38 kB 682.96 kB +0.93% 106.78 kB 107.77 kB
facebook-www/ReactART-dev.modern.js +0.77% 722.16 kB 727.75 kB +0.92% 112.17 kB 113.20 kB
react-native/implementations/ReactFabric-dev.fb.js +0.77% 725.57 kB 731.16 kB +0.94% 115.19 kB 116.27 kB
facebook-www/ReactART-dev.classic.js +0.76% 731.66 kB 737.24 kB +0.91% 113.92 kB 114.96 kB
react-native/implementations/ReactNativeRenderer-dev.fb.js +0.76% 736.76 kB 742.34 kB +0.87% 116.88 kB 117.89 kB
oss-experimental/react-reconciler/cjs/react-reconciler.development.js +0.69% 805.03 kB 810.61 kB +0.85% 125.44 kB 126.51 kB
facebook-www/ReactReconciler-dev.modern.js +0.67% 838.95 kB 844.53 kB +0.87% 129.96 kB 131.09 kB
facebook-www/ReactReconciler-dev.classic.js +0.66% 848.15 kB 853.73 kB +0.83% 131.74 kB 132.84 kB
oss-experimental/react-markup/cjs/react-markup.react-server.development.js +0.65% 614.56 kB 618.53 kB +0.45% 109.15 kB 109.64 kB
facebook-react-native/react-dom/cjs/ReactDOMClient-dev.js +0.54% 1,095.43 kB 1,101.29 kB +0.67% 181.22 kB 182.44 kB
facebook-react-native/react-dom/cjs/ReactDOMProfiling-dev.js +0.53% 1,111.70 kB 1,117.56 kB +0.65% 184.02 kB 185.22 kB
oss-experimental/react-dom/cjs/react-dom-client.development.js +0.50% 1,176.14 kB 1,182.01 kB +0.61% 195.81 kB 197.00 kB
oss-experimental/react-dom/cjs/react-dom-profiling.development.js +0.49% 1,192.53 kB 1,198.39 kB +0.61% 198.63 kB 199.85 kB
oss-experimental/react-dom/cjs/react-dom-unstable_testing.development.js +0.49% 1,192.69 kB 1,198.55 kB +0.59% 199.53 kB 200.71 kB
facebook-www/ReactDOM-dev.modern.js +0.46% 1,218.42 kB 1,224.00 kB +0.54% 201.19 kB 202.28 kB
facebook-www/ReactDOM-dev.classic.js +0.45% 1,227.56 kB 1,233.15 kB +0.54% 202.92 kB 204.01 kB
facebook-www/ReactDOMTesting-dev.modern.js +0.45% 1,234.96 kB 1,240.54 kB +0.53% 204.91 kB 205.99 kB
facebook-www/ReactDOMTesting-dev.classic.js +0.45% 1,244.10 kB 1,249.68 kB +0.51% 206.61 kB 207.66 kB

Generated by 🚫 dangerJS against c5495b6

@animesh0545
Copy link

@CodiumAI-Agent /improve

@CodiumAI-Agent
Copy link

CodiumAI-Agent commented Jun 27, 2025

PR Code Suggestions ✨

Latest suggestions up to c5495b6

CategorySuggestion                                                                                                                                    Impact
General
Broaden key null check

Use != null instead of !== null to also catch undefined keys, ensuring no keys are
inadvertently skipped.

packages/react-reconciler/src/ReactFiberPerformanceTrack.js [269-271]

-if (fiber.key !== null) {
+if (fiber.key != null) {
   addValueToProperties('key', fiber.key, properties, 0);
 }
Suggestion importance[1-10]: 5

__

Why: Using != null prevents accidentally including undefined keys, improving correctness with minimal change.

Low
Broaden props null check

Similarly, switch to != null for memoizedProps to handle both null and undefined
cases and avoid missing props.

packages/react-reconciler/src/ReactFiberPerformanceTrack.js [272-274]

-if (fiber.memoizedProps !== null) {
+if (fiber.memoizedProps != null) {
   addObjectToProperties(fiber.memoizedProps, properties, 0);
 }
Suggestion importance[1-10]: 5

__

Why: Switching to != null correctly skips both null and undefined memoizedProps, fixing a subtle bug.

Low

Previous suggestions

Suggestions up to commit c5495b6
CategorySuggestion                                                                                                                                    Impact
Possible issue
Guard against circular object recursion

Add cycle detection to avoid infinite recursion when serializing objects with
circular references by tracking visited objects in a WeakSet.

packages/shared/ReactPerformanceTrackProperties.js [52-56]

 export function addObjectToProperties(
   object: Object,
   properties: Array<[string, string]>,
   indent: number,
+  visited: WeakSet<mixed> = new WeakSet(),
 ): void {
+  if (visited.has(object)) {
+    return;
+  }
+  visited.add(object);
Suggestion importance[1-10]: 6

__

Why: The cycle detection guard helps prevent infinite recursion when serializing circular objects, but the snippet is incomplete—it needs to propagate the visited set to recursive calls for full effectiveness.

Low
General
Add explicit properties array type

Annotate the properties constant with a Flow type to ensure it is inferred as
Array<[string, string]> and avoid widening errors in downstream calls.

packages/react-client/src/ReactFlightPerformanceTrack.js [154-159]

-const properties = [
+const properties: Array<[string, string]> = [
   [
     'Aborted',
     'The stream was aborted before this Component finished rendering.',
   ],
 ];
Suggestion importance[1-10]: 4

__

Why: Explicitly annotating the properties constant with a Flow type improves type safety and consistency, but it’s a minor style change with limited functional impact.

Low

@sebmarkbage sebmarkbage merged commit d2a288f into facebook:main Jun 27, 2025
241 checks passed
github-actions bot pushed a commit that referenced this pull request Jun 27, 2025
Similar to how we can include a Promise resolved value we can include
Component Props.

For now I left out props for Client Components for perf unless they
error. I'll try it for Client Components in general in a separate PR.

<img width="730" alt="Screenshot 2025-06-26 at 5 54 29 PM"
src="https://github.com/user-attachments/assets/f0c86911-2899-4b5f-b45f-5326bdbc630f"
/>
<img width="762" alt="Screenshot 2025-06-26 at 5 54 12 PM"
src="https://github.com/user-attachments/assets/97540d19-5950-4346-99e6-066af086040e"
/>

DiffTrain build for [d2a288f](d2a288f)
github-actions bot pushed a commit that referenced this pull request Jun 27, 2025
Similar to how we can include a Promise resolved value we can include
Component Props.

For now I left out props for Client Components for perf unless they
error. I'll try it for Client Components in general in a separate PR.

<img width="730" alt="Screenshot 2025-06-26 at 5 54 29 PM"
src="https://github.com/user-attachments/assets/f0c86911-2899-4b5f-b45f-5326bdbc630f"
/>
<img width="762" alt="Screenshot 2025-06-26 at 5 54 12 PM"
src="https://github.com/user-attachments/assets/97540d19-5950-4346-99e6-066af086040e"
/>

DiffTrain build for [d2a288f](d2a288f)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed React Core Team Opened by a member of the React Core Team

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants