Skip to content

FIX: Support React StrictMode by re-registering components on mount - #2337

Open
Talha12Shiekh wants to merge 1 commit into
appbaseio:nextfrom
Talha12Shiekh:fix/strictmode-support
Open

FIX: Support React StrictMode by re-registering components on mount#2337
Talha12Shiekh wants to merge 1 commit into
appbaseio:nextfrom
Talha12Shiekh:fix/strictmode-support

Conversation

@Talha12Shiekh

@Talha12Shiekh Talha12Shiekh commented Aug 3, 2026

Copy link
Copy Markdown

Proposed Changes

Ensures all ReactiveSearch components function correctly under React's StrictMode (in development mode) by making Redux component registration resilient to double-mounting cycles:

  1. Mount Safeguard (componentDidMount): Added a validation step in ComponentWrapper.js and DynamicRangeSlider.js that checks if a component is registered in the Redux store. If missing (e.g. unmounted/removed due to StrictMode double-rendering), it automatically re-registers and re-binds watchers.
  2. Fixed Unmount Cleanup Typo (ComponentWrapper.js): Corrected a typo in componentWillUnmount (this.$timestamp -> this._timestamp), resolving component leaks in the Redux store on real component unmounts.
  3. Map State to Props: Added components state map in DynamicRangeSlider's mapStateToProps to enable mount-time existence checks.

Linked Issues

Checklist

  • Describe the proposed changes and how it'll improve the library experience.
  • Please make sure that there are no linting errors in the code.
  • Add a demo video/gif/screenshot to explain how did you test the fix.
  • If it is a global change, try to add any side effects that it could have.
  • Create a PR to add/update the docs (if needed) at here.
  • Create a PR to add/update the storybook (if needed) at here.

Improvements to the Library Experience

  • StrictMode Compatibility: Resolves the critical development-mode bug where keystrokes fail to fire queries, URL parameters vanish, and results fail to display when components are wrapped in React's <StrictMode>.
  • Zero Resource Leaks: Ensures Redux store properly cleans up components and queries on genuine unmounts by fixing the timestamp property typo.

Side Effects

  • None. This preserves the existing store and component registration flows but ensures robustness when React performs double-mount checks.

Testing

  • Successfully compiled the modified components to CommonJS/ES modules with Babel (yarn build).
  • Verified code structure is clean and syntactically correct.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

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

1 participant