Fix 5034 by converting Form to functional component#5043
Draft
heath-freenome wants to merge 3 commits intomainfrom
Draft
Fix 5034 by converting Form to functional component#5043heath-freenome wants to merge 3 commits intomainfrom
heath-freenome wants to merge 3 commits intomainfrom
Conversation
- Refactored `Form` into a functional component, moving a bunch of computations into helper function in `formUtils.ts` - Updated `core/index.ts` to update exports of new `Form` related types - Updated `withTheme.ts` to use new `FormRef` type - Updated tests for `Form`, `NumberField` and `withTheme` to use the new `FormRef` type - Added unit tests for all functions in `formUtils`
heath-freenome
commented
Apr 23, 2026
| /** Backward-compatible type alias for `FormRef`. Consumers who previously used the class-based | ||
| * `Form` as a ref type (e.g. `createRef<Form>()`) can continue to do so via this alias. | ||
| */ | ||
| FormRef as Form, |
Member
Author
There was a problem hiding this comment.
This is kind of a breaking change since the Form component being exported will cause a TS warning about using typeof Form instead. Or the user has to import type { Form } rather than import type Form. And if they need both the type and component, then they'd have to do import Form, { FormRef }
nickgros
reviewed
Apr 24, 2026
| * @param next - The next render's props | ||
| * @returns - `true` when the component should skip re-rendering; `false` when it should re-render | ||
| */ | ||
| export function propsAreEqual<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>( |
Contributor
There was a problem hiding this comment.
Should this use existing util shouldRender? Slightly different since this is now a function component, but could probably be adapted instead of reimplemented
nickgros
reviewed
Apr 24, 2026
|
|
||
| /** Always holds the latest committed state for use inside callbacks */ | ||
| const stateRef = useRef(state); | ||
| stateRef.current = state; |
Contributor
There was a problem hiding this comment.
also wrap in useLayoutEffect
Contributor
There was a problem hiding this comment.
Contributor
There was a problem hiding this comment.
maybe create a useLatestRef utility hook
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
2 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.
Reasons for making this change
Forminto a functional component, moving a bunch of computations into helper function informUtils.tscore/index.tsto update exports of newFormrelated typeswithTheme.tsto use newFormReftypeForm,NumberFieldandwithThemeto use the newFormReftypeformUtilsChecklist
npx nx run-many --target=build --exclude=@rjsf/docs && npm run test:updateto update snapshots, if needed.