perf(form): improve performance of editor inputs #136
Conversation
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
miguelgrc
force-pushed
the
improve-input-performance
branch
from
24ecd62 to
36a8a1e
Compare
miguelgrc
force-pushed
the
improve-input-performance
branch
from
36a8a1e to
eeb8c74
Compare
pamfilos
requested changes
Oct 1, 2025
formule-demo/src/App.tsx
Outdated
| <Typography.Text strong>Form data</Typography.Text> | ||
| <CodeViewer | ||
| value={JSON.stringify(formuleState?.formData, null, 2)} | ||
| value={JSON.stringify(getFormuleState().formData, null, 2)} |
Collaborator
There was a problem hiding this comment.
getFormuleState why change this, since formuleState is used around ?
Contributor
Author
There was a problem hiding this comment.
The SchemaSynchronizer does not update the synced state when the formData updates so now we need to get it directly from formule and not from formuleState
src/StateSynchronizer.jsx
Outdated
|
|
||
| useEffect(() => { | ||
| synchronizeState(state); | ||
| const prev = previousStateRef.current; |
Contributor
Author
There was a problem hiding this comment.
It's to filter out formData updates from the state sync and avoid updating the state continuously when typing
Collaborator
|
also lets try fix the test |
Open
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.
When typing or interacting with a big form in the editor the performance became poor, making the inputs feel laggy. This was caused by many unnecessary rerenders of many different field components in reaction to
formDataupdates. This PR implements the following changes to address this performance degradation:formDatastate updates on form input changes in editor (EditablePreview).TextWidgetandSelectWidgetby only subscribing toformDatachanges in case they have autofill or a suggestions endpoint configured, respectively, since it is not needed otherwise.persistMiddleware(which saves schemas to localStorage on change) when the action isupdateFormData, removing many unnecessary saves.StateSychronizernot trigger when onlyformDatahas changed. This means if we want to accessformDatafrom an app we have to fetch it directly from formule (getFormuleState().formData), and not from the synced state.These changes greatly improve the performance for big schemas. However, there is still room for improvement, as
formDataupdates can still make the field laggy for a fraction of a second when the debounce fires.