Skip to content

Conversation

heath-freenome
Copy link
Member

@heath-freenome heath-freenome commented Oct 16, 2025

Reasons for making this change

The work to convert ArrayField to stateless funcitonal components with some breaking changes

  • In @rjsf/utils:
    • BREAKING CHANGE: Updated ArrayFieldItemButtonsTemplateType to replace the onAddIndexClick(), onCopyIndexClick(), onDropIndexClick() and onReorderClick() callback-generator props with the onAddItem(), onCopyItem(), onMoveUpItem(), onMoveDownItem() and onRemoveItem() callback props
    • BREAKING CHANGE: Updated ArrayFieldItemTemplateType to change key: string to itemKey: string to avoid a name collision with React
    • BREAKING CHANGE: Updated ArrayFieldTemplateProps to change the type of the items prop from ArrayFieldItemTemplateType<T, S, F>[] to ReactElement[]
  • In @rjsf/core:
    • Updated ArrayField to refactor code from a class component to seven stateless functional components, replacing the 4 generator-props with the 5 memoized props mentioned in the @rjsf/utils changes
      • BREAKING CHANGE: The refactor included rendering the ArrayFieldItemTemplate directly by the ArrayField rather than deferring it to the ArrayFieldTemplate
      • Updated the ArrayField tests to adjust for the rendering change AND to remove 2 tests due to them no longer being valid
    • BREAKING CHANGE: Updated ArrayFieldTemplate to remove the ArrayFieldItemTemplate render in favor of simply using items due to ArrayField changes
    • BREAKING CHANGE: Updated ArrayFieldItemButtonsTemplate to replace the old callback-generator functions with the new memoizable callback functions
    • Fixed a bug in Form to avoid getting errors being reported at the root level via onChange when there aren't
  • In the rest of the themes, updated ArrayFieldTemplate to remove the ArrayFieldItemTemplate render in favor of simply using items due to ArrayField changes (BREAKING CHANGES)
  • Updated the customArray sample to refactor out a ArrayFieldItemButtonsTemplate
  • Updated the custom-templates.md documentation to reflect the ArrayField conversion changes
  • Updated the v6.x upgrade guide.md documentation to add the BREAKING CHANGES to ArrayFieldTemplateProps, ArrayFieldItemTemplateType and ArrayFieldItemButtonsTemplateType
  • Updated the CHANGELOG.md accordingly

Checklist

  • I'm updating documentation
  • I'm adding or updating code
    • I've added and/or updated tests. I've run npx nx run-many --target=build --exclude=@rjsf/docs && npm run test:update to update snapshots, if needed.
    • I've updated docs if needed
    • I've updated the changelog with a description of the PR
  • I'm adding a new feature
    • I've updated the playground with an example use of the feature

parentUiSchema?: UiSchema<T, S, F>;
};

/**
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since we've made such a large set of breaking changes, I figured we don't need to maintain this anymore

@heath-freenome heath-freenome force-pushed the array-field-functional-component branch from 5525b75 to ac03fa2 Compare October 17, 2025 21:34
heath-freenome and others added 7 commits October 18, 2025 09:35
The work to convert `ArrayField` to stateless funcitonal components with some breaking changes
- In `@rjsf/utils`:
   - BREAKING CHANGE: Updated `ArrayFieldItemButtonsTemplateType` to replace the `onAddIndexClick()`, `onCopyIndexClick()`, `onDropIndexClick()` and `onReorderClick()` callback-generator props with the `onAddItem()`, `onCopyItem()`, `onMoveUpItem()`, `onMoveDownItem()` and `onRemoveItem()` callback props
  - BREAKING CHANGE: Updated `ArrayFieldItemTemplateType` to change `key: string` to `itemKey: string` to avoid a name collision with React
  - BREAKING CHANGE: Updated `ArrayFieldTemplateProps` to change the type of the `items` prop from `ArrayFieldItemTemplateType<T, S, F>[]` to `ReactElement[]`
- In `@rjsf/core`:
  - Updated `ArrayField` to refactor code from a class component to seven stateless functional components, replacing the 4 generator-props with the 5 memoized props mentioned in the `@rjsf/utils` changes
    - BREAKING CHANGE: The refactor included rendering the `ArrayFieldItemTemplate` directly by the `ArrayField` rather than deferring it to the `ArrayFieldTemplate`
    - Updated the `ArrayField` tests to adjust for the rendering change AND to remove 2 tests due to them no longer being valid
  - BREAKING CHANGE: Updated `ArrayFieldTemplate` to remove the `ArrayFieldItemTemplate` render in favor of simply using `items` due to `ArrayField` changes
  - BREAKING CHANGE: Updated `ArrayFieldItemButtonsTemplate` to replace the old callback-generator functions with the new memoizable callback functions
- In the rest of the themes, updated `ArrayFieldTemplate` to remove the `ArrayFieldItemTemplate` render in favor of simply using `items` due to `ArrayField` changes
- Updated the `customArray` sample to refactor out a `ArrayFieldItemButtonsTemplate`
- Updated the `custom-templates.md` documentation to reflect the `ArrayField` conversion changes
- Updated the `v6.x upgrade guide.md` documentation to add the BREAKING CHANGES to the `ArrayFieldTemplateProps`, `ArrayFieldItemTemplateType` and `ArrayFieldItemButtonsTemplateType`
- Updated the `CHANGELOG.md` accordingly

# Conflicts:
#	CHANGELOG.md
#	packages/core/src/components/fields/ArrayField.tsx
… root level via `onChange` when there aren't
@heath-freenome heath-freenome force-pushed the array-field-functional-component branch from 6bbd965 to 6c66078 Compare October 18, 2025 16:35
Co-authored-by: Nick Grosenbacher <[email protected]>
The following new types were added to `@rjsf/utils`:

- `ArrayFieldItemTemplateType`: The properties of each element in the ArrayFieldTemplateProps.items array. NOTE: `ArrayFieldTemplateItemType` is an alias to this type
- `ArrayFieldItemTemplateProps`: The properties of each element in the ArrayFieldTemplateProps.items array. NOTE: `ArrayFieldTemplateItemType` is an alias to this type
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
- `ArrayFieldItemTemplateProps`: The properties of each element in the ArrayFieldTemplateProps.items array. NOTE: `ArrayFieldTemplateItemType` is an alias to this type
- `ArrayFieldItemTemplateProps`: The properties of each element in the ArrayFieldTemplateProps.items array.

@heath-freenome heath-freenome merged commit c81ccfb into rjsf-team:main Oct 18, 2025
4 checks passed
@heath-freenome heath-freenome deleted the array-field-functional-component branch October 18, 2025 16:55
nickgros added a commit to nickgros/react-jsonschema-form that referenced this pull request Oct 18, 2025
LayoutGridField:
- Deep compare memoize the fieldPathId
- Move helper functions in LayoutGridField
- Update docs comments in LayoutGridField
- Attach TEST_IDS to LayoutGridField function

Additionally:
- Update migration guide per rjsf-team#4808
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants