Search Results Not closing, and marker not dropping about react-map-gl-geocoder HOT 9 OPEN

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

from react-map-gl-geocoder.

Nvm figured it out

from react-map-gl-geocoder.

@SamSamskies can you help me please?

from react-map-gl-geocoder.

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

from react-map-gl-geocoder.

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?

from react-map-gl-geocoder.

#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?

from react-map-gl-geocoder.

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.

from react-map-gl-geocoder.

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?

from react-map-gl-geocoder.

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();
}, []);

from react-map-gl-geocoder.