Infinite loop error when using the transformItems prop from InstantSearch's Menu component

[willlee17]

Description
Hello!

I have a simple search app using Gatsby, Meilisearch, and Instantsearch. I'm using Meilisearch Cloud as well.
Search and all that works great. I wanted to fine tune the result being shown in the UI when filtering. InstantSearch's docs referred me to use
transformItems within the Menu component I'm using (make sure you're on InstantSearch v7 when clicking the url).

Any time I add the prop, I run into an infinite loop. Even when I'm just returning the initial results with no mutations.

<Menu attribute="optionTypes.optionValues.presentation" transformItems={(items) => { console.log("items: ", items); return items; }} />

Any insights?

Packages used:
"react-instantsearch": "^7.5.3",
"@meilisearch/instant-meilisearch": "^0.13.6",
"gatsby-plugin-meilisearch": "^0.3.1",

If applicable, add screenshots or logs to help explain your problem.

Environment (please complete the following information):

• OS: Mac
• Browser: Version 111.0.5563.146 (Official Build) (arm64)
• Meilisearch version: 1.6.2 (based on the info from the Cloud)
• instant-meilisearch version: 0.13.6
• instantsearch.js version: 7.5.3

[curquiza]

Hello @willlee17
sorry for the daly, do you have the same issue with the latest version of instant-meilisearch?
https://github.com/meilisearch/meilisearch-js-plugins/releases

[christopherpickering]

Heres another discussion about it, it seems like to make it work, the transformItems function needs to be declared outside your component.
algolia/react-instantsearch#3541

Like the algolia example: https://www.algolia.com/doc/api-reference/widgets/refinement-list/react/?client=TypeScript#hook

If you want to declare it inside your component (like if you need some other prop for a filter) you can use useCallback:

 const transformItems = useCallback(
    (items) => {
      console.log(categories)
      return items
      
    },
    [categories],
  )

  const { items, refine, searchForItems } = useRefinementList({
    attribute,
    transformItems,
})