feat(react-form): add display name to components

[kidonng]

Currently, with the following code:

<AppForm>
  <ContainerForm>
    <AppField name="animal">
      {() => <RadioGroupField {...props} />}
    </AppField>
  </ContainerForm>
</AppForm>

Storybook's "Show code" function displays "No Display Name" for <AppForm> and <AppField>:

By assigning a displayName, they are displayed with correct names:

Assigning displayName is necessary since merely this...

    const AppForm = useMemo(() => {
-      return (({ children }) => {
+      const AppForm = (({ children }) => {

...would display as <AppForm2> instead since it is renamed when compiled:

const AppForm = useMemo(() => {
  const AppForm2 = ({ children }) => {
    return /* @__PURE__ */ jsx(formContext.Provider, { value: form, children });
  };
  AppForm2.displayName = "AppForm";
  return AppForm2;
}, [form]);

EDIT: since assigning displayName triggers a lint error, I'm resorting to simple named functions.

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 714de59.

Command	Status	Duration	Result
nx affected --targets=test:sherif,test:knip,tes...	✅ Succeeded	2m	View ↗
nx run-many --target=build --exclude=examples/**	✅ Succeeded	5s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-05-08 05:40:07 UTC

[pkg-pr-new]

More templates

• @tanstack/form-example-angular-array
• @tanstack/form-example-angular-simple
• @tanstack/form-example-lit-simple
• @tanstack/form-example-lit-ui-libraries
• @tanstack/form-example-react-array
• @tanstack/form-example-react-compiler
• @tanstack/field-errors-from-form-validators
• @tanstack/form-example-react-next-server-actions
• @tanstack/form-example-react-large-form
• @tanstack/form-example-react-query-integration
• @tanstack/form-example-remix
• @tanstack/form-example-react-simple
• @tanstack/form-example-react-standard-schema
• @tanstack/form-example-react-tanstack-start
• @tanstack/form-example-react-ui-libraries
• @tanstack/form-example-solid-array
• @tanstack/form-example-solid-simple
• @tanstack/form-example-svelte-array
• @tanstack/form-example-svelte-simple
• @tanstack/form-example-vue-array
• @tanstack/form-example-vue-simple

@tanstack/angular-form

npm i https://pkg.pr.new/@tanstack/angular-form@1491

@tanstack/form-core

npm i https://pkg.pr.new/@tanstack/form-core@1491

@tanstack/lit-form

npm i https://pkg.pr.new/@tanstack/lit-form@1491

@tanstack/react-form

npm i https://pkg.pr.new/@tanstack/react-form@1491

@tanstack/solid-form

npm i https://pkg.pr.new/@tanstack/solid-form@1491

@tanstack/vue-form

npm i https://pkg.pr.new/@tanstack/vue-form@1491

@tanstack/svelte-form

npm i https://pkg.pr.new/@tanstack/svelte-form@1491

commit: 714de59

[kidonng]

Well... https://github.com/TanStack/form/actions/runs/14899285839/job/41847764667?pr=1491#step:6:185

/home/workflows/workspace/packages/react-form/src/createFormHook.tsx
  278:7   error    This mutates a variable that React considers immutable                                 react-compiler/react-compiler

I am fine without the better displayName.

I also just notice more components like <Subscribe> needs this.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 43.94%. Comparing base (3fe66dd) to head (714de59).
Report is 1 commits behind head on main.

Additional details and impacted files

@@             Coverage Diff             @@
##             main    #1491       +/-   ##
===========================================
- Coverage   88.96%   43.94%   -45.02%     
===========================================
  Files          31       13       -18     
  Lines        1396      157     -1239     
  Branches      353       26      -327     
===========================================
- Hits         1242       69     -1173     
+ Misses        137       77       -60     
+ Partials       17       11        -6     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[crutchcorn]

Does const Name = () => {} add the name to the function? For some reason I only thought that function Name() {} worked

[kidonng]

Yes, this is easy to verify:

const Component = () => {}
Component.name // Component

Also documented: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/name#variable_declaration_and_method (not quite the same, but you get the idea)

[cgatian]

Thank you @kidonng just ran into this in Storybook docs.