Run some snippet code after search functionality

[kevinvasoya]

Hi, we are using the @klevu-core for the project, developed using Next Js and we want to run some snippet code after search functionality which is available in klevu documentation, I referred to the functionality of SearchResultPage.tsx from GitHub pages. Also, I used the same functionality from Klevu Documentation but render it multiple times like 3 to 4 times. So is there any solution for running snippet code after the search functionality and a solution to prevent multiple renders in use callback function? We refer below documentation for our Project.

const initialFetch = useCallback(async () => { const modifiers = [ listFilters({ include: ["color", "", "size", "designer"], rangeFilterSettings: [ { key: "klevu_price", minMax: true, }, ], filterManager: manager, }), applyFilterWithManager(manager), sendSearchEvent(), ]

if (props.personlisationEnabled) {
  modifiers.push(personalisation())
}

const functions = [
  search(
    query.get("q"),
    {
      id: "search",
      limit: 36,
      sort: sorting,
    },
    ...modifiers
  ),
]
const res = await KlevuFetch(...functions)

const searchResult = res.queriesById("search")
if (!searchResult) {
  return
}

nextFunc = searchResult.next

clickManager = searchResult.getSearchClickSendEvent()

setShowMore(Boolean(searchResult.next))
setOptions(manager.options)
setSliders(manager.sliders)
setProducts(searchResult.records ?? [])

}, [sorting, query])

const fetchMore = async () => { const nextRes = await nextFunc({ filterManager: manager, })

const searchResult = nextRes.queriesById("search")

setProducts([...products, ...(searchResult?.records ?? [])])
nextFunc = searchResult.next
setShowMore(Boolean(searchResult.next))

}

const handleFilterUpdate = () => { setOptions(manager.options) setSliders(manager.sliders) initialFetch() }

React.useEffect(() => { const stop = KlevuListenDomEvent( KlevuDomEvents.FilterSelectionUpdate, handleFilterUpdate )

// cleanup this component
return () => {
  stop()
}

}, [location.pathname, query, sorting])

useEffect(() => { initialFetch() }, [sorting, query, location.pathname])

[rallu]

Thanks for the information. We should work on our React example a little bit more and remove extra rendering in some cases.