Search Results Not closing, and marker not dropping

[MuhammadJafarFA17BCS054]

Hi there,
I am having an issue with react-map-gl-geocoder. When i use "filter" prop to filter the search results, the geocoder's default marker doesnt drop on selected location, also the menu with search results doesnt collaps, it reopens.
I know you are going to ask me to memoize my handleViewPortChange function, the thing is I am new to react and i dont know how to do that. Can somebody please help me? Attaching the screenshot of my source code.

[MuhammadJafarFA17BCS054]

@SamSamskies can you help me please?

[SamSamskies]

Hi @MuhammadJafarFA17BCS054, you are already memoizing the handleViewportChange function. However, you are not memoizing the function that you are passing to the filter prop. All objects and functions that are passed as props need to be memoized. https://reactjs.org/docs/hooks-reference.html#usecallback

[MuhammadJafarFA17BCS054]

Hi @SamSamskies , Thankyou for helping me out, but as i said in the start, I am a newbie, i read the article but i still cant figure out how to memoize the function that i am passing to filter prop. Can you help me?

[MuhammadJafarFA17BCS054]

#39 (comment)
I checked this code, I think it was written by you. It has the same error as mine. Can you make a new repo or something addressing the issue?

[SamSamskies]

You can use the useCallback hook to memoize functions. Without that a new function is created on every render which causes the geocoder to be re-initialized. Another solution would be to define the function outside of your component. That works because the reference to the function won't change every time the component renders.

Thanks for pointing out the issue with the broken sandbox. I fixed it.

[MuhammadJafarFA17BCS054]

Thank You so much @SamSamskies , i got the basic idea what useCallBack do and what memoized functions are. What i am stuck on now is that, how do i call multiple functions (each made using a useCallBack hook) on onResult prop of Geocoder?

[SamSamskies]

You can wrap both of the functions with another function.

const sayHello = () => console.log("hello");
const sayWorld = () => console.log("world");
const sayHelloWorld = useCallback(() => {
  sayHello();
  sayWorld();
}, []);

[congdoe]

@MuhammadJafarFA17BCS054 - Were you able to resolve your issue. It seems I am having the same issue but for onResult prop.

[congdoe]

Nvm figured it out