Performance regression from dom to hooks

🐛 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
4. 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
• React version: 18.2.0
• Browser: Firefox 108
• OS: MacOS

[joepio]

@Haroenv

No multiple components, but I do have a useHits somewhere else to render the count.

Let me try this:

  let {
    results: { nbHits },
    hits,
  } = useHits({
    escapeHTML: false,
  });

[Haroenv]

escapeHTML can be avoided in React, because you don’t render dangerouslySetInnerHTML, therefore it can be faster if you do this:

https://codesandbox.io/s/silly-fermi-qj4dbn?file=/App.tsx:4270-4410

I’ll think about how this can be improved and leads to less wasted cycles by default too