Как работает useState в хуках?

Question

[ArgeoMer]

Есть кастомный хук:

function useMap(mapRef,  location) {
   const [map, setMap] = useState(null)

   useEffect(() => {
      if (mapRef.current !== null && map === null) {
         const instance = leaflet.createMap(mapRef, location)//упрощенный код 
         setMap(instance)
      }
   }, [map, location])

   return map;
}

Данный хук вызывается в компоненте, у которого есть пропсы которые приходят с сервера.

function Map({ location }) {
   const mapRef = useRef(null)
   const map = useMap(mapRef, location)
   return (
      <div
         ref={mapRef}
         style={{ height: height }}
      />     
   )
}

Беда в следующем: после первого рендера компонента в useMap вызывается этот треклятый setMap. Следующие рендеры этого компонента происходят практически сразу же(так как location приходит с сервера быстро). И в этом же хуке useMap Map остается равен null, а не тому что мы передали при прошлом рендере в setMap. Cпустя какое-то время Map все-таки обновляется, но это может произойти и на 2, и на 3, и на 4 рендере. В моей голове было понимание, что setState, если был вызван на прошлом ренедере, на следующем точно принимает значение переданное в этот setState.

Спасибо за любую помощь. Второй день бьюсь в поисках ответа, поэтому прошу понять кашу в моей голове.

Comments

[Александр]

useEffect(() => { console.log(map); }, [map]);
Вот и смотрите сколько раз рендер происходит из-за useMap. Ну и можете map === null вынести в обычную переменную до useEffect и после её уже использовать в нём.

[strelok011]

А зачем в useEffect в депсах висит map? На сколько я понял, этот хук должен реагировать только на location? Вы же один раз этот пропс тащите с бэка? А так - каждое изменение map будет у вас дергать этот useEffect.