Skip to content

perf(property-search): memoize handlers to reduce re-renders - #1293

Merged
nanaf6203-bit merged 2 commits into
MettaChain:mainfrom
Spaully:fix/issue-1209-optimize-property-search-renders
Oct 15, 2026
Merged

nanaf6203-bit merged 2 commits into
MettaChain:mainfrom
Spaully:fix/issue-1209-optimize-property-search-renders

Conversation

@Spaully

@Spaully Spaully commented Oct 15, 2026 •

Copy link
Copy Markdown
Contributor

Summary

Reduces unnecessary re-renders in the PropertySearch component by memoizing the search box and stabilising the callback props passed down to the input and suggestion list.

This branch has been rebased onto the current main, which already carries the search error boundary merged from a sibling PR. The memoized component now sits inside that boundary, so both behaviours are preserved.

Problem

PropertySearchInner defined every handler - handleInputChange, handleSuggestionClick, handleSearchSelect, handleFocus, handleKeyDown and handleClear - inline on each render. Any re-render therefore produced fresh function identities for every handler and forced the input and suggestion buttons to reconcile even when the query and results had not changed.

Changes Made

  • Imported memo and useCallback in src/components/PropertySearch.tsx.
  • Wrapped each of the six handlers in useCallback with dependencies limited to what they actually read: onChange for handleInputChange and handleClear, onChange plus saveToHistory for handleSuggestionClick and handleSearchSelect, �alue for handleFocus, and suggestions, selectedIndex and handleSuggestionClick for handleKeyDown.
  • Added const MemoizedPropertySearchInner = memo(PropertySearchInner) and rendered it inside the existing ErrorBoundary in the exported PropertySearch.

Implementation Details

The handlers previously changed identity on every render, which defeated memoization of anything downstream and is the main source of wasted work in this component. With the callbacks stabilised, handleKeyDown still observes the current suggestion list and highlighted index because those are declared as its dependencies. Memoization is applied to the inner component so the already-merged error boundary is preserved rather than replaced. The public props interface and rendered markup are unchanged.

Closes #1210

Closes #1209

Closes #1208

Closes #1207

@drips-wave

drips-wave Bot commented Oct 15, 2026

Copy link
Copy Markdown

@Spaully Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

@nanaf6203-bit nanaf6203-bit left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

LGTM

@nanaf6203-bit
nanaf6203-bit merged commit 2ed0dd4 into MettaChain:main Oct 15, 2026
0 of 4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

2 participants