perf: O3-5300 optimize search components with useMemo and useCallback hooks#353
perf: O3-5300 optimize search components with useMemo and useCallback hooks#353sanks011 wants to merge 5 commits intoopenmrs:mainfrom
Conversation
- Add useMemo for static arrays in SearchByDemographics (genders, livingStatuses) - Add useMemo for static arrays in SearchByConcepts (observationOptions, whichObservation) - Add useMemo for methods array in SearchByLocation - Add useCallback for event handlers across all search components - Reduces unnecessary re-renders and improves memory usage - Maintains full functionality - all tests passing
- Add useMemo for static arrays in SearchByDemographics (genders, livingStatuses) - Add useMemo for static arrays in SearchByConcepts (observationOptions, whichObservation) - Add useMemo for methods array in SearchByLocation - Add useCallback for event handlers across all search components - Add .vscode to gitignore for better IDE integration - Reduces unnecessary re-renders and improves memory usage - Maintains full functionality - all tests passing
sanks011
changed the title
There was a problem hiding this comment.
Pull request overview
This PR implements React performance optimizations by adding useMemo and useCallback hooks to prevent unnecessary re-renders in search components of the cohort builder application.
Changes:
- Add memoization hooks to static configuration arrays in search components
- Add useCallback to event handlers to prevent function recreation on every render
- Add .vscode directory to .gitignore for better IDE integration support
Reviewed changes
Copilot reviewed 4 out of 5 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| .gitignore | Adds .vscode directory to ignored files and updates comment to be more generic |
| search-by-location.component.tsx | Adds useMemo for methods array and useCallback for handleResetInputs and submit functions |
| search-by-enrollments.component.tsx | Adds useCallback for handleResetInputs and submit functions |
| search-by-demographics.component.tsx | Adds useMemo for genders and livingStatuses arrays, and useCallback for reset and submit functions |
| search-by-concepts.component.tsx | Adds useMemo for observationOptions and whichObservation arrays, and useCallback for handleReset, getOnOrBefore, and handleSubmit functions |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| await onSubmit(composeJson(params), queryDescriptionBuilder(observations, concept.name)); | ||
| setIsLoading(false); | ||
| }; | ||
| }, [concept, operator, operatorValue, getOnOrBefore, onOrBefore, onOrAfter, timeModifier, onSubmit]); |
There was a problem hiding this comment.
The dependency array includes getOnOrBefore which is itself a memoized function. This creates an unnecessary dependency chain since getOnOrBefore already depends on lastDays and lastMonths. Instead of including getOnOrBefore in the dependencies, include its underlying dependencies lastDays and lastMonths directly, or call getOnOrBefore() inline without making it a separate memoized function.
| }, [concept, operator, operatorValue, getOnOrBefore, onOrBefore, onOrAfter, timeModifier, onSubmit]); | |
| }, [concept, operator, operatorValue, lastDays, lastMonths, onOrBefore, onOrAfter, timeModifier, onSubmit]); |
| ], [t]); | ||
|
|
||
| const reset = () => { | ||
| const reset = useCallback(() => { |
There was a problem hiding this comment.
The function name reset is inconsistent with the naming pattern used in other search components. Other components use handleResetInputs or handleReset for similar functionality. Consider renaming to handleReset for consistency.
Requirements
Summary
This PR implements React performance optimizations across multiple search components in the cohort builder application to reduce unnecessary re-renders and improve memory usage.
Changes Made:
Performance Benefits:
Components Optimized:
SearchByDemographics- Static arrays and event handlers memoizedSearchByConcepts- Observation options and functions optimizedSearchByLocation- Methods array and handlers optimizedSearchByEnrollments- Event handlers optimizedScreenshots
Related Issue
Jira Ticket: https://openmrs.atlassian.net/browse/O3-5300
Other
All existing functionality is preserved. No breaking changes. TypeScript and ESLint compliant. Added .vscode to gitignore for better development experience.