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.