React StrictMode incompatibility in development causing SearchBox and ReactiveList components to fail

[Defconn4]

Affected Projects

• React

Library Version: x.y.z

• ReactiveCore Version 10.4.0

Describe the bug

• ReactiveSearch components (SearchBox and ReactiveList) fail to function properly when wrapped in React's StrictMode during development. The SearchBox component does not trigger API requests on keystroke, URL parameters flash and reset immediately, and ReactiveList does not display results despite the API returning valid data.

Environment

• React: 18.3.1 / 19.1.1 (tested both versions)
• React-DOM: 18.3.1 / 19.1.1
• ReactiveSearch: 4.3.0
• ReactiveCore: 10.4.0
• Build tool: Vite 7.1.2
• Package manager: pnpm
• Backend: ReactiveSearch API (Docker) with Zinc/OpenSearch

To Reproduce
Steps to reproduce the behavior:

1. Create a React application with StrictMode enabled in development:

// main.tsx
createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>
);

2. Implement basic ReactiveSearch components:

<ReactiveBase
  app='movie-app'
  url='http://localhost:8001'
  reactivesearchAPIConfig={{
    recordAnalytics: true,
    userId: 'user-id',
  }}
>
  <SearchBox
    componentId='SearchSensor'
    dataField={['title', 'content']}
    autosuggest={false}
    URLParams
  />
  
  <ReactiveList
    componentId='SearchResults'
    dataField='_score'
    size={10}
    react={{ and: 'SearchSensor' }}
    render={({ data }) => (
      <div>{/* render results */}</div>
    )}
  />
</ReactiveBase>

3. Run development server (npm run dev or pnpm dev)
4. Type a query into the SearchBox component
5. Observe that no API requests are made and no results are displayed in the Network tab of your browser developer console (for Chromium based browsers)

Observed Behavior:

• SearchBox does not trigger /_reactivesearch API requests on keystroke
• URL parameters (e.g., ?SearchSensor=query) appear briefly then immediately reset
• ReactiveList receives empty data array despite API returning valid results
• Component state appears to reset/reinitialize continuously

Expected behavior

• SearchBox should trigger API requests on each keystroke (with debounce)
• URL parameters should persist in the browser URL
• ReactiveList should receive and display search results
• Components should maintain state properly during user interaction

Root Cause Analysis

• React's StrictMode intentionally double-renders components in development to detect side effects and state management issues. This double-rendering behavior conflicts with ReactiveSearch's internal state management, causing:
  • Component lifecycle hooks to fire multiple times
  • Internal state to reset between renders
  • Query parameters to clear unexpectedly
  • API request cancellation or non-execution

Desktop (please complete the following information):

• OS: MacOS Sequoia 15.6.1 (24G90)
• Browser: Chrome (latest)

Additional context

• Described below in the "Workaround", "Testing Results Summary" and "Related Discussion" sections below.

Workaround

• Disable StrictMode in development, all ReactiveSearch components work as expected in development.

// main.tsx
createRoot(document.getElementById('root')!).render(
  // <StrictMode>  // Comment out for development
    <App />
  // </StrictMode>
);

Testing Results Summary

Scenario	StrictMode	Build Type	autosuggest	Result
1	Enabled	Development	true/false	Broken
2	Disabled	Development	false	Works perfectly
3	Disabled	Development	true	Works (suggestions on keystroke)
4	Enabled/Disabled	Production	true/false	Works perfectly

1. Production builds are unaffected - Running pnpm build && pnpm preview works perfectly regardless of StrictMode configuration
2. React 19 compatibility confirmed - Issue persists in React 19.1.1, confirming it's a StrictMode-specific problem, not a React version issue
3. Hot-reload side effect - When StrictMode is disabled and the autosuggest prop is toggled without page refresh, a secondary issue occurs where queries only fire on "Enter" key and add \n to input. This resolves with page refresh.
4. No code changes needed - Components work correctly; only StrictMode configuration needs adjustment

Related Discussion:

• This issue has been discussed with @siddharthlatest via email with video demonstrations showing the exact behavior.

Video Demonstration:
[I can attach video if needed showing the before/after behavior with StrictMode enabled/disabled]