Prop from parent component returns empty on one of the childs

Question

I have a map component with two childs - GSearchVehicle & MapView - with a positions prop. On the zoomInVehicle function the positions always returns with a empty array, but on the renderCustomCluster function it returns full.

The zoomInVehicle is a function triggered by a custom onPress on GSearchVehicle, it returns the vehicle id that I want to use on the zoomInVehicle. The problem is the positions prop not returning filled.

This is bugging me 'cause positions is filled on all places of the GMap component, but only on that function it returns empty... and it's not a problem about waiting the positions request because it's already filled by the time you call that zoomInVehicle function.

What is the meaning of this behavior? Something with the scope of GSearchVehicle and MapView? I can't see why positions is empty only on that function.

const GMap: React.FC<GMapProps> = ({ positions, selectMarker, selectedMarker }) => {
  const mapRef = useRef<MapViewProps | any>(null);

  console.log(positions); // [{...}] <--- NOT EMPTY!

  const zoomInVehicle = (vehicleId: number): void => {
    console.log(vehicleId); // 15486
    console.log(positions); // [] <--- EMPTY!
    // ...
  };

  const renderCustomCluster = (cluster: any) => {
    console.log(positions) // [{...}] <--- NOT EMPTY!
    // ...
  }

  return (
    <>
      <GSearchVehicle
        placeholder="Digite a placa ou descrição"
        onPress={zoomInVehicle}
      />

      <MapView
        ref={mapRef}
        style={{ flex: 1 }}
        initialRegion={INITIAL_REGION}
        provider={null}
        showsCompass={false}
        renderCluster={renderCustomCluster}
        rotateEnabled={false}
        onRegionChangeComplete={getRegionZoom}
      >
        <UrlTile urlTemplate={TILE_URL} shouldReplaceMapContent />

        {/* Draw vehicle marker */}
        { positions.map((position) => (
          <Marker
            key={position.adhesion.id}
            tracksViewChanges={false}
            coordinate={position.coordinates}
            onPress={() => selectMarker(position)}
          >
            <GVehicleMarker
              key={position.adhesion.id}
              position={position}
            />
          </Marker>
        ))}

        {/* ... */}
      </MapView>
    </>
  );
};

Answer 1

I found the problem, on the GSearchVehicle component my memoized functions were missing the positions prop on it's dependencies.

  const memoizedItems = useMemo(() => renderItem, [vehiclesGroup, positions]);
  const memoizedHeader = useMemo(() => renderSectionHeader, [vehiclesGroup, positions]);