algolia / algolia/instantsearch
Performance regression from dom to hooks - hits hooks and components have costly `escapeHits`
- Dominant language
- TypeScript
- Stars
- 4.1k
- Forks
- 553
- Avg merge
- 1d 11h
- Merged PRs (30d)
- 51
Description
## 🐛 Bug description
I noticed that performance of updating the search query became quite a bit worse when I changed from `-dom` to `-web-hooks`.
Some functions that seem responsible for pretty much all of the wait time:
- `escapeHits`
- `recursiveEscape`
- `getWidgetRenderState`


## 🔍 Bug reproduction
**Steps to reproduce the behavior:**
1. Set up a basic React-Instantsearch with `Hits` and `SearchBox` with `react-instantsearch-dom`
2. Start typing, note the quick rendering
3. Switch to `react-instantsearch-dom`
2. Start typing, note the slower rendering
Sorry for the lack of demo repo, my project is currently closed source. I'll try to dive in deeper, I'll update this issue
Some findings / thoughts:
- The issue scales with the amount of `HitsPerPage`
- Even if my custom `Hit` component returns null, the issue is bad, so it's not really the rendering part, I think.
- It may have something to do with my relatively large documents, which contains many keys (about 100 KV combos)
**Live reproduction:**
https://codesandbox.io/s/github/algolia/react-instantsearch/tree/master/examples/hooks
## Environment
- React InstantSearch Hooks version: 6.38.0 (also tried 6.40.0)
- React version: 18.2.0
- Browser: Firefox 108
- OS: MacOS
## POSSIBLE FIX:
- Set `escapeHTML` to false in all `InfiniteHits` / `Hits` components and `useHits` , `useInfiniteHits` hooks.
- Use production build
Contributor guide
Research direction
Start with escapeHits, recursiveEscape, and getWidgetRenderState in the React InstantSearch Hooks path, then reproduce the comparison using the linked CodeSandbox with Hits and SearchBox. Profile typing with different HitsPerPage values and document sizes, and compare the hooks and DOM implementations. Done means the hooks path no longer shows the reported update-time regression.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend, performance
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100