Parameters of my function in React child component are not being passed to the parent component's function. Why is this happening?

Question

In the parent:

 const [newPinPosition, setNewPinPosition] = React.useState({ lat: 0 , lng: 0 });
 const updateNewPinPos = (pos) => {
   console.log(pos);
   setNewPinPosition({ lat: pos.lat, lng: pos.lng });
  };

  // in the render method of the parent react component
  <Draggable
     draggable={draggable} 
     newPinPosition={newPinPosition}   
     setCenterPos={() => { getCurrentCenter(map); }}
     updatePos={() => { updateNewPinPos(newPinPosition); }}
   />

In the child:

const updatePosition = useCallback(() => {
const marker = markerRef.current;
// console.log(`marker._latlng : ${marker._latlng}`);
props.updatePos(marker._latlng);
});

<StyledMarker   
   position={props.newPinPosition}
   draggable={props.draggable}
   ref={markerRef}
   eventHandlers={{
      dragend: () => {updatePosition();},
      }}
 >

I am using React Leaflet to render a world map. I am trying to update the state (position object) of a draggable marker on the dragend event.

When dragend fires, updatePos fires as well (as it should) and it calls props.updatePos (as it should).

The issue is this: in the console.log of the child, I have the position object of the marker. This is the expected and correct behavior. In the parent component, the updateNewPinPos function is being called, but the pos parameter is an empty object. This happens even though I am calling the function with the marker._latlang object. Why is this happening? How is this object being "lost" between child and parent?

I am quite new to react so I apologize if this is pretty basic, but I am struggling a lot with this. I can provide more information if necessary.

Answer 1

You are not using the dependency array of useCallback

The useCallback hook 2nd parameter is its dependencies array, and you should put there anything that you're using inside the useCallback function. React will cache your function as long as the dependencies are the same.

I would advice not using useCallback in this case. But if you still want to, you should do it like this:

const updatePosition = useCallback(() => {
  const marker = markerRef.current;
  props.updatePos(marker._latlng);
}, [props.updatePos]);

Also in your parent component, you should use the given parameters, or just pass the function as is, like this:

 <Draggable
     draggable={draggable} 
     newPinPosition={newPinPosition}   
     setCenterPos={() => { getCurrentCenter(map); }}
     updatePos={updateNewPinPos}
   />