algolia / instantsearch

⚡️ Libraries for building performant and instant search and recommend experiences with Algolia. Compatible with JavaScript, TypeScript, React and Vue.
https://www.algolia.com/doc/guides/building-search-ui/what-is-instantsearch/js/
MIT License
3.59k stars 503 forks source link

fix(Configure): prevent aroundRadius="all" throwing #6193

Closed Haroenv closed 1 month ago

Haroenv commented 1 month ago

Summary

Because React props are not writable, behaviour inside _parseNumbers > merge in the helper requires the configure props to be writable.

fixes #6136

See https://github.com/algolia/instantsearch/pull/6011 for the ultimate cause of this issue; _parseNumbers mutates the arguments as it's much more performant than making a copy on every interaction (this is a very hot function).

Result

This bug is reproducible by simply rendering <Configure aroundRadius="all" /> or any other numeric (https://github.com/algolia/instantsearch/blob/d1aa720c8e4e1aad2d7b64e385a29b258240c7df/packages/algoliasearch-helper/src/SearchParameters/index.js#L239-L251) key as a non-number string. After this PR, the bug no longer happens.

Note that of course this has a performance penalty (or regression) for the Configure widget. There's no way around this as far as I can tell, unless we'd manually make the props writable, but that seems like a bad idea.

codesandbox-ci[bot] commented 1 month ago

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit bd84738241388561242691ab21919d8b01eec508:

Sandbox Source
example-instantsearch-getting-started Configuration
example-react-instantsearch-getting-started Configuration
example-react-instantsearch-next-app-dir-example Configuration
example-react-instantsearch-next-routing-example Configuration
example-vue-instantsearch-getting-started Configuration