⚡ Bolt: Optimize validation error lookup in VisualEditor#952
⚡ Bolt: Optimize validation error lookup in VisualEditor#952
Conversation
Replaced O(N*M) array filtering with O(M) useMemo map and O(1) lookups to reduce render overhead when dealing with numerous form fields and validation rules. Co-authored-by: anchapin <6326294+anchapin@users.noreply.github.com>
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
Reviewer's GuideOptimizes how validation errors are looked up in VisualEditor by memoizing a per-field error map and updates the Bolt engineering notes with the associated performance learnings. Class diagram for VisualEditor validation error handlingclassDiagram
class ValidationRule {
+string field
+string message
}
class VisualEditor {
+VisualEditorProps props
+ValidationRule[] validationErrors
+Record~string, ValidationRule[]~ fieldErrorsMap
+ValidationRule[] getFieldErrors(fieldName string)
}
VisualEditor --> ValidationRule
Flow diagram for optimized validation error lookup in VisualEditorflowchart TD
A["validationErrors: ValidationRule[]"] --> B["useMemo builds fieldErrorsMap in a single O(M) pass"]
B --> C["fieldErrorsMap: Record<string, ValidationRule[]>"]
C --> D["getFieldErrors(fieldName) uses O(1) lookup"]
D --> E["Return fieldErrorsMap[fieldName] or []"]
E --> F["Child components (e.g. FormBuilder) render fields with pre-grouped errors"]
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hey - I've left some high level feedback:
- Given the new guideline in
.jules/bolt.mdabout preferring simple loops overreducein hot paths, consider rewritingfieldErrorsMap’suseMemoto use aforloop to avoid callback allocations and slightly reduce overhead on very largevalidationErrorsarrays. - When building
fieldErrorsMap, consider initializing the accumulator withObject.create(null)instead of a plain object to avoid potential prototype key collisions and clarify that it’s being used purely as a hash map.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- Given the new guideline in `.jules/bolt.md` about preferring simple loops over `reduce` in hot paths, consider rewriting `fieldErrorsMap`’s `useMemo` to use a `for` loop to avoid callback allocations and slightly reduce overhead on very large `validationErrors` arrays.
- When building `fieldErrorsMap`, consider initializing the accumulator with `Object.create(null)` instead of a plain object to avoid potential prototype key collisions and clarify that it’s being used purely as a hash map.Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
There was a problem hiding this comment.
Pull request overview
Optimizes VisualEditor field-level validation error lookup to reduce render-time overhead on large forms, and documents the performance learning in the Bolt log.
Changes:
- Precomputes a
fieldErrorsMapviauseMemoto avoid repeatedvalidationErrors.filter(...)calls per field. - Updates
getFieldErrorsto perform O(1) lookups instead of O(M) filtering. - Adds Bolt learnings about avoiding O(N*M) lookups in list renders.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| frontend/src/components/BehaviorEditor/VisualEditor/VisualEditor.tsx | Adds memoized grouping of validation errors by field and switches lookups to map-based access. |
| .jules/bolt.md | Documents the performance optimization pattern and related learnings. |
| } | ||
| acc[error.field].push(error); | ||
| return acc; | ||
| }, {} as Record<string, ValidationRule[]>); |
There was a problem hiding this comment.
Using a plain object literal as a lookup table can break (and can be security-sensitive) when error.field matches an Object prototype key (e.g. __proto__, constructor, toString). In those cases acc[error.field] may not be an array and .push can throw or mutate the prototype. Consider using Object.create(null) for the accumulator (or a Map) so arbitrary field names are safe.
| }, {} as Record<string, ValidationRule[]>); | |
| }, Object.create(null) as Record<string, ValidationRule[]>); |
| const getFieldErrors = useCallback( | ||
| (fieldName: string): ValidationRule[] => { | ||
| return validationErrors.filter((error) => error.field === fieldName); | ||
| return fieldErrorsMap[fieldName] || []; | ||
| }, | ||
| [validationErrors] | ||
| [fieldErrorsMap] |
There was a problem hiding this comment.
getFieldErrors falls back to a new empty array literal on every call (|| []). On large forms where most fields have no errors, this still allocates many arrays per render (and FormBuilder calls getFieldErrors multiple times per field). Consider returning a shared EMPTY_ERRORS constant (or using nullish coalescing with a memoized empty array) to avoid unnecessary allocations.
Replaced an O(N*M) array filtering loop in
getFieldErrorscallback with a single-pass O(M)useMemomap lookup inVisualEditor.tsx, reducing render blocking on large forms. Added corresponding learning into.jules/bolt.md.PR created automatically by Jules for task 287371400512358371 started by @anchapin
Summary by Sourcery
Optimize validation error lookup in VisualEditor to reduce render-time complexity on large forms and document the performance pattern in Bolt notes.
Enhancements:
Documentation: