algolia / algolia/instantsearch

Performance regression from dom to hooks - hits hooks and components have costly `escapeHits`

Open
#5,237 15 comments 2 reactions 0 assignees View on GitHub
Library: React InstantSearch ≥ 7
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`

![Screenshot 2022-11-17 at 22 07 00](https://user-images.githubusercontent.com/2183313/202560514-bb05abad-530e-4a81-a932-02eb9f0bdfda.png)

![Screenshot 2022-11-17 at 22 18 03](https://user-images.githubusercontent.com/2183313/202561750-03e10eb3-9cce-413c-a09d-a941c85a7f7c.png)

## 🔍 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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.