Почему не работает плавное перемещение по карте

Пытаюсь добавить кнопку текущей позиции, которая должна плавно возвращать на позицию пользователя. Есть такой код компонента карты.

const MapWrapper = () => {
  const ymaps = useMapInitialize();
  const { long } = useCurrentLocation();
  const [location, setLocation] = useState(LOCATION);

  const changeMapPosition = useCallback((loc: YMapLocationRequest) => {
    setLocation({ ...loc, duration: 5000 });
  }, []);

  const changeCenterBtnHandler = useCallback(() => {
    changeMapPosition(NEW_LOCATION_CENTER);
  }, [changeMapPosition]);

  if (!ymaps || !long) {
    return <Loader />;
  }

  const {
    YMap,
    YMapDefaultSchemeLayer,
    YMapDefaultFeaturesLayer,
    YMapControls,
    YMapControlButton
  } = ymaps.module(ymaps3);

  return (
    <YMap className={styles.map} showScaleInCopyrights location={location}>
      <YMapDefaultSchemeLayer />
      <YMapDefaultFeaturesLayer />
      <YMapControls position="right">
        <YMapControlButton
          text="Change Center"
          color="#fff"
          background="#007afce6"
          onClick={() => changeCenterBtnHandler()}
        />
      </YMapControls>
    </YMap>
  );
};

useMapInitialize =

const useMapInitialize = () => {
  const [ymaps, setYmaps] = useState<Reactify | null>(null);

  const loadYmaps = useMemo(
    () => async () => {
      const [ymaps3React] = await Promise.all([
        ymaps3.import('@yandex/ymaps3-reactify'),
        ymaps3.ready
      ]);
      const reactify = ymaps3React.reactify.bindTo(React, ReactDOM);
      setYmaps(reactify);
    },
    []
  );

  useEffect(() => {
    loadYmaps();
  }, [loadYmaps]);

  return ymaps;
};

export default useMapInitialize;

Кнопка как бы отрабатывает правильно, но плавное перемещение не происходит.


Ответы (1 шт):

Автор решения: YaSupport

Проблема в том, что вы получаете новый компонент YMaps при каждом рендере MapWrapper. Получается, что каждый раз карта пересоздается.

Рекомендуем обернуть ymaps.module (ymaps3) в useMemo, чтобы не вызывать его повторно.

→ Ссылка