Problem

Currently, many components using useSearchStore destructure the entire state object:

const { numSearchResultsTimeline, numSearchResultsTable, searchUiState } = useSearchStore();

This causes components to re-render on ANY change to the search store, even when the component doesn't use the changed properties.

Solution

Update all useSearchStore usages to use specific selectors:

const numSearchResultsTimeline = useSearchStore(state => state.numSearchResultsTimeline);
const numSearchResultsTable = useSearchStore(state => state.numSearchResultsTable);
const searchUiState = useSearchStore(state => state.searchUiState);

This ensures components only re-render when their specific dependencies change.

Files to Update

All files that import and use useSearchStore should be audited and updated to use proper selectors.

References

• PR: feat(new-webui): Adds search job ID and number of search results to search page. #962
• Comment: feat(new-webui): Adds search job ID and number of search results to search page. #962 (comment)
• Reported by: @junhaoliao

Benefits

• Improved performance by reducing unnecessary re-renders
• Better scalability as the state store grows
• Follows Zustand best practices