bugfix(react-jsx-runtime): static children problem on render function by bsunderhus · Pull Request #29162 · microsoft/fluentui

bsunderhus · 2023-09-18T12:53:17Z

New Behavior

The new React jsx runtime splits the creation of a jsx element into 2, one for static elements and one for dynamic elements.

A static element is an element with a well defined amount of unkeyed children (above one), unkeyed chldren means a set of children where their position does not change, something like these:

<div id="parent">
  <div>child 1</div>
  <div>child 2</div>
  <div>child 3</div>
</div>

in this case on the newest react runtime this will be transpiled to something like:

jsxs("div", {
  id: "parent",
  children: [
    jsx("div", { children: "child1" }),
    jsx("div", { children: "child2" }),
    jsx("div", { children: "child3" }),
  ],
});

Notice that the first parent div is rendered by invoking a jsxs method meanwhile all it's children are rendered by a jsx method.

A static element will always have as it's children an array of unkeyed content. A dynamic element on the other hand cannot understand an array of unkeyed content.

❗️ Warning: React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.

The problem issued on #29144 shows that on a render function of the button slot we're dealing with a case where a static element children is being passed down to a dynamic element.

This PR solves this by wrapping this children around a single static fragment and then passing it down as the children of the render function, that way the render function (which will probably be a dynamic render) can easily render the children again as either a static or a dynamic content.

Related Issue(s)

Fixes [Bug]: When slot with children is used then error/warning is shown: React.jsx: Static children should always be an array. #29144

codesandbox-ci · 2023-09-18T13:05:43Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit e69ef0c:

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration

fabricteam · 2023-09-18T13:08:02Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react-accordion` Accordion (including children components)	`91.384 kB` `27.926 kB`	`91.584 kB` `27.965 kB`	`200 B` `39 B`
`react-alert` Alert	`83.458 kB` `22.856 kB`	`83.657 kB` `22.895 kB`	`199 B` `39 B`
`react-avatar` Avatar	`48.836 kB` `15.406 kB`	`49.035 kB` `15.434 kB`	`199 B` `28 B`
`react-avatar` AvatarGroup	`18.584 kB` `7.448 kB`	`18.782 kB` `7.48 kB`	`198 B` `32 B`
`react-avatar` AvatarGroupItem	`63.488 kB` `19.752 kB`	`63.687 kB` `19.786 kB`	`199 B` `34 B`
`react-badge` Badge	`25.793 kB` `8.348 kB`	`25.987 kB` `8.384 kB`	`194 B` `36 B`
`react-badge` CounterBadge	`26.694 kB` `8.658 kB`	`26.888 kB` `8.687 kB`	`194 B` `29 B`
`react-badge` PresenceBadge	`23.852 kB` `8.733 kB`	`24.046 kB` `8.762 kB`	`194 B` `29 B`
`react-button` Button	`39.469 kB` `10.758 kB`	`39.667 kB` `10.794 kB`	`198 B` `36 B`
`react-button` CompoundButton	`46.824 kB` `12.259 kB`	`47.023 kB` `12.295 kB`	`199 B` `36 B`
`react-button` MenuButton	`43.896 kB` `12.025 kB`	`44.094 kB` `12.056 kB`	`198 B` `31 B`
`react-button` SplitButton	`51.922 kB` `13.596 kB`	`52.12 kB` `13.632 kB`	`198 B` `36 B`
`react-button` ToggleButton	`56.557 kB` `12.667 kB`	`56.756 kB` `12.702 kB`	`199 B` `35 B`
`react-card` Card - All	`91.249 kB` `26.409 kB`	`91.443 kB` `26.437 kB`	`194 B` `28 B`
`react-card` Card	`86.038 kB` `24.868 kB`	`86.232 kB` `24.895 kB`	`194 B` `27 B`
`react-card` CardFooter	`11.951 kB` `5.031 kB`	`12.14 kB` `5.061 kB`	`189 B` `30 B`
`react-card` CardHeader	`14.237 kB` `5.798 kB`	`14.431 kB` `5.832 kB`	`194 B` `34 B`
`react-card` CardPreview	`12.903 kB` `5.408 kB`	`13.097 kB` `5.434 kB`	`194 B` `26 B`
`react-checkbox` Checkbox	`35.614 kB` `11.771 kB`	`35.808 kB` `11.802 kB`	`194 B` `31 B`
`react-combobox` Combobox (including child components)	`90.383 kB` `29.52 kB`	`90.577 kB` `29.554 kB`	`194 B` `34 B`
`react-combobox` Dropdown (including child components)	`88.738 kB` `29.167 kB`	`88.932 kB` `29.201 kB`	`194 B` `34 B`
`react-components` react-components: Button, FluentProvider & webLightTheme	`69.328 kB` `19.608 kB`	`69.526 kB` `19.647 kB`	`198 B` `39 B`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`208.141 kB` `59.349 kB`	`208.347 kB` `59.369 kB`	`206 B` `20 B`
`react-components` react-components: FluentProvider & webLightTheme	`40.713 kB` `13.509 kB`	`40.92 kB` `13.553 kB`	`207 B` `44 B`
`react-datepicker-compat` DatePicker Compat	`211.441 kB` `58.79 kB`	`211.639 kB` `58.838 kB`	`198 B` `48 B`
`react-dialog` Dialog (including children components)	`89.925 kB` `27.453 kB`	`90.125 kB` `27.485 kB`	`200 B` `32 B`
`react-divider` Divider	`19.704 kB` `7.38 kB`	`19.902 kB` `7.415 kB`	`198 B` `35 B`
`react-field` Field	`21.036 kB` `8.091 kB`	`21.234 kB` `8.128 kB`	`198 B` `37 B`
`react-image` Image	`14.62 kB` `5.869 kB`	`14.818 kB` `5.902 kB`	`198 B` `33 B`
`react-infobutton` InfoButton	`129.602 kB` `40.729 kB`	`129.801 kB` `40.756 kB`	`199 B` `27 B`
`react-infobutton` InfoLabel	`133.328 kB` `41.913 kB`	`133.534 kB` `41.945 kB`	`206 B` `32 B`
`react-input` Input	`25.955 kB` `8.81 kB`	`26.143 kB` `8.844 kB`	`188 B` `34 B`
`react-jsx-runtime` JSX Dev Runtime	`2.775 kB` `1.29 kB`	`2.893 kB` `1.319 kB`	`118 B` `29 B`
`react-jsx-runtime` JSX Runtime	`3.293 kB` `1.529 kB`	`3.479 kB` `1.554 kB`	`186 B` `25 B`
`react-label` Label	`13.036 kB` `5.405 kB`	`13.225 kB` `5.438 kB`	`189 B` `33 B`
`react-link` Link	`15.902 kB` `6.506 kB`	`16.095 kB` `6.53 kB`	`193 B` `24 B`
`react-menu` Menu (including children components)	`139.629 kB` `43.01 kB`	`139.823 kB` `43.055 kB`	`194 B` `45 B`
`react-menu` Menu (including selectable components)	`142.365 kB` `43.541 kB`	`142.559 kB` `43.576 kB`	`194 B` `35 B`
`react-persona` Persona	`55.727 kB` `17.285 kB`	`55.926 kB` `17.314 kB`	`199 B` `29 B`
`react-popover` Popover	`118.701 kB` `37.361 kB`	`118.895 kB` `37.406 kB`	`194 B` `45 B`
`react-progress` ProgressBar	`16.409 kB` `6.58 kB`	`16.598 kB` `6.608 kB`	`189 B` `28 B`
`react-provider` FluentProvider	`21.258 kB` `7.937 kB`	`21.465 kB` `7.975 kB`	`207 B` `38 B`
`react-radio` Radio	`29.318 kB` `9.699 kB`	`29.517 kB` `9.732 kB`	`199 B` `33 B`
`react-radio` RadioGroup	`14.344 kB` `5.942 kB`	`14.543 kB` `5.985 kB`	`199 B` `43 B`
`react-select` Select	`27.324 kB` `9.773 kB`	`27.518 kB` `9.804 kB`	`194 B` `31 B`
`react-slider` Slider	`36.849 kB` `12.171 kB`	`37.043 kB` `12.203 kB`	`194 B` `32 B`
`react-spinbutton` SpinButton	`35.53 kB` `11.367 kB`	`35.724 kB` `11.399 kB`	`194 B` `32 B`
`react-spinner` Spinner	`22.292 kB` `8.113 kB`	`22.481 kB` `8.146 kB`	`189 B` `33 B`
`react-switch` Switch	`31.885 kB` `10.356 kB`	`32.079 kB` `10.39 kB`	`194 B` `34 B`
`react-table` DataGrid	`156.416 kB` `43.567 kB`	`156.606 kB` `43.603 kB`	`190 B` `36 B`
`react-table` Table (Primitives only)	`42.463 kB` `13.255 kB`	`42.651 kB` `13.28 kB`	`188 B` `25 B`
`react-table` Table as DataGrid	`129.276 kB` `34.739 kB`	`129.472 kB` `34.761 kB`	`196 B` `22 B`
`react-table` Table (Selection only)	`74.56 kB` `20.053 kB`	`74.748 kB` `20.076 kB`	`188 B` `23 B`
`react-table` Table (Sort only)	`73.191 kB` `19.649 kB`	`73.379 kB` `19.672 kB`	`188 B` `23 B`
`react-tags-preview` InteractionTag	`13.85 kB` `5.626 kB`	`14.038 kB` `5.658 kB`	`188 B` `32 B`
`react-tags-preview` Tag	`29.612 kB` `9.571 kB`	`29.806 kB` `9.597 kB`	`194 B` `26 B`
`react-tags-preview` TagGroup	`72.493 kB` `21.628 kB`	`72.687 kB` `21.648 kB`	`194 B` `20 B`
`react-text` Text - Default	`15.644 kB` `6.223 kB`	`15.832 kB` `6.254 kB`	`188 B` `31 B`
`react-text` Text - Wrappers	`18.817 kB` `6.546 kB`	`19.01 kB` `6.578 kB`	`193 B` `32 B`
`react-textarea` Textarea	`30.005 kB` `10.156 kB`	`30.203 kB` `10.199 kB`	`198 B` `43 B`
`react-toast` Toast (including Toaster)	`91.601 kB` `27.394 kB`	`91.789 kB` `27.423 kB`	`188 B` `29 B`
`react-tooltip` Tooltip	`51.154 kB` `18.06 kB`	`51.348 kB` `18.113 kB`	`194 B` `53 B`

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`react-jsx-runtime` Classic Pragma	`1.072 kB` `544 B`
`react-portal-compat` PortalCompatProvider	`6.541 kB` `2.227 kB`

_{🤖 This report was generated against 921694374c78c37ecf18d7bb99000bb0bb67551b}

size-auditor · 2023-09-18T13:14:13Z

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 921694374c78c37ecf18d7bb99000bb0bb67551b (build)

fabricteam · 2023-09-18T13:16:15Z

🕵 fluentuiv9 No visual regressions between this PR and main

fabricteam · 2023-09-19T08:45:47Z

Perf Analysis (`@fluentui/react-components`)

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Button	mount	316	319	5000	Possible regression
FluentProviderWithTheme	virtual-rerender-with-unmount	70	82	10	Possible regression
InfoButton	mount	14	14	5000	Possible regression
SpinButton	mount	1448	1361	5000	Possible regression

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	628	598	5000
Button	mount	316	319	5000	Possible regression
Field	mount	1153	1079	5000
FluentProvider	mount	706	683	5000
FluentProviderWithTheme	mount	85	85	10
FluentProviderWithTheme	virtual-rerender	67	74	10
FluentProviderWithTheme	virtual-rerender-with-unmount	70	82	10	Possible regression
InfoButton	mount	14	14	5000	Possible regression
MakeStyles	mount	836	860	50000
Persona	mount	1720	1667	5000
SpinButton	mount	1448	1361	5000	Possible regression

layershifter · 2023-09-20T13:24:32Z

+        />,
+      );

+      // your test code here


bsunderhus self-assigned this Sep 18, 2023

github-actions Bot added this to the September Project Cycle Q4 2023 milestone Sep 18, 2023

bsunderhus marked this pull request as ready for review September 18, 2023 13:00

bsunderhus requested a review from a team as a code owner September 18, 2023 13:00

bsunderhus marked this pull request as draft September 18, 2023 13:01

bsunderhus force-pushed the react-jsx-runtime/fix--29144 branch from 16b07fe to a52ffbb Compare September 19, 2023 08:36

bsunderhus force-pushed the react-jsx-runtime/fix--29144 branch 5 times, most recently from a3a51f7 to 742d4bc Compare September 19, 2023 13:43

bsunderhus marked this pull request as ready for review September 19, 2023 13:43

bsunderhus force-pushed the react-jsx-runtime/fix--29144 branch from 742d4bc to 6d0510d Compare September 19, 2023 13:45

ling1726 reviewed Sep 19, 2023

View reviewed changes

Comment thread packages/react-components/react-jsx-runtime/src/jsx/jsxDEVSlot.ts

ling1726 reviewed Sep 19, 2023

View reviewed changes

Comment thread packages/react-components/react-jsx-runtime/src/utils/types.ts Outdated

ling1726 reviewed Sep 19, 2023

View reviewed changes

Comment thread packages/react-components/react-jsx-runtime/src/jsx-runtime.test.tsx

fix: static children problem on render function

e69ef0c

bsunderhus force-pushed the react-jsx-runtime/fix--29144 branch from 56c4abf to e69ef0c Compare September 20, 2023 07:15

ling1726 approved these changes Sep 20, 2023

View reviewed changes

bsunderhus merged commit cd66e97 into microsoft:master Sep 20, 2023

bsunderhus deleted the react-jsx-runtime/fix--29144 branch September 20, 2023 09:00

layershifter reviewed Sep 20, 2023

View reviewed changes

bsunderhus mentioned this pull request Sep 26, 2023

bugfix(react-jsx-runtime): react dev runtime call is missing source parameter #29295

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

bugfix(react-jsx-runtime): static children problem on render function#29162

bugfix(react-jsx-runtime): static children problem on render function#29162
bsunderhus merged 1 commit into
microsoft:masterfrom
bsunderhus:react-jsx-runtime/fix--29144

bsunderhus commented Sep 18, 2023 •

edited

Loading

Uh oh!

codesandbox-ci Bot commented Sep 18, 2023 •

edited

Loading

Uh oh!

fabricteam commented Sep 18, 2023 •

edited

Loading

Uh oh!

size-auditor Bot commented Sep 18, 2023 •

edited

Loading

Uh oh!

fabricteam commented Sep 18, 2023 •

edited

Loading

Uh oh!

fabricteam commented Sep 19, 2023 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

layershifter Sep 20, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Conversation

bsunderhus commented Sep 18, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

New Behavior

Related Issue(s)

Uh oh!

codesandbox-ci Bot commented Sep 18, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

fabricteam commented Sep 18, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Bundle size report

Uh oh!

size-auditor Bot commented Sep 18, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Asset size changes

Uh oh!

fabricteam commented Sep 18, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🕵 fluentuiv9 No visual regressions between this PR and main

Uh oh!

fabricteam commented Sep 19, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react-components)

Uh oh!

Uh oh!

Uh oh!

Uh oh!

layershifter Sep 20, 2023

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

bsunderhus commented Sep 18, 2023 •

edited

Loading

codesandbox-ci Bot commented Sep 18, 2023 •

edited

Loading

fabricteam commented Sep 18, 2023 •

edited

Loading

size-auditor Bot commented Sep 18, 2023 •

edited

Loading

fabricteam commented Sep 18, 2023 •

edited

Loading

fabricteam commented Sep 19, 2023 •

edited

Loading

Perf Analysis (`@fluentui/react-components`)