A tag search panel has two filter buttons wrapped in React.memo so they only re-render when their props actually change. Typing in the search input should leave the filter buttons completely untouched.
Type any character in the search box - both filter button render counters increment on every keystroke even though neither the label nor the handler logic has changed.
Think about where `searchConfig` lives and whether JavaScript considers it the same object from one render to the next.
Think about where `searchConfig` lives and whether JavaScript considers it the same object from one render to the next.
Why this fixes it
`const searchConfig = { caseSensitive: false }` sits inside the component body, so every render allocates a brand-new object at a new memory address. Even though the contents never change, JavaScript's `===` comparison sees two different references. `useCallback` invalidates its cached function whenever any listed dependency changes reference - so `handleApply` gets a new function identity on every render. `React.memo` then receives a new `onApply` prop each time, its shallow comparison fails, and both filter buttons re-render on every keystroke. Moving `searchConfig` to module scope gives it a single permanent reference that never changes, `useCallback` holds its function across renders, and the memo check passes correctly whenever only `query` changes.