如何理解useState的行为？自定义hook状态更新未及时生效问题

相关代码展示 #

useMap 自定义Hook #

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;
}

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传入的实例值。map最终会更新，但可能要等到第2、3或4次渲染才会生效。

原本的认知是：前一次渲染调用setState后，下一次渲染必然能拿到更新后的值，对此存在疑惑。

原因拆解 #

你的核心认知是对的——前一次渲染调用setState后，下一次渲染确实能获取到更新后的值，但问题出在渲染批次和依赖逻辑的执行顺序上：

1. 首次渲染：map初始值为null，mapRef.current要等DOM挂载后才会赋值，所以第一次useEffect不会立即执行。
2. DOM挂载完成：mapRef.current有值，触发useEffect，此时map还是null，满足条件创建地图实例并调用setMap(instance)，这会触发一次新渲染。
3. 但服务端返回的location恰好在此刻更新，触发组件另一次重新渲染——这次渲染和setMap触发的渲染被React批量处理，导致这次渲染中map依然是null。
4. 后续setMap触发的渲染会让map变为实例，但如果location更新的渲染又触发useEffect，此时map已非null，不会重复创建地图，要等React处理完所有渲染队列，map才会稳定返回实例。

另外，useEffect把map作为依赖项，每次map变化都会重新执行useEffect，这属于冗余逻辑，反而会加剧渲染顺序的混乱。

解决方案 #

方案1：用Ref跟踪初始化状态，避免重复创建地图 #

用ref替代useState的map来判断是否已创建地图，不受渲染批次影响：

function useMap(mapRef, location) {
   const [map, setMap] = useState(null)
   const isMapCreated = useRef(false) // 用Ref同步跟踪初始化状态

   useEffect(() => {
      if (mapRef.current !== null && !isMapCreated.current) {
         const instance = leaflet.createMap(mapRef, location)
         setMap(instance)
         isMapCreated.current = true // 标记已创建，避免重复执行
      }
   }, [mapRef, location])

   return map;
}

不管location更新多快，只要地图已创建，就不会重复执行初始化逻辑，setMap触发的渲染会正确返回实例值。

方案2：拆分创建与更新逻辑，适配location变化 #

如果需要在location更新时同步调整地图位置而非重建地图，可拆分逻辑：

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

   useEffect(() => {
      if (mapRef.current === null) return;

      // 未创建地图则初始化
      if (!map) {
         const instance = leaflet.createMap(mapRef, location)
         setMap(instance)
      } else {
         // 已创建则更新地图位置
         map.setView(location) // 对应Leaflet的位置更新方法
      }
   }, [mapRef, location, map])

   return map;
}

这里依赖项包含map，但只有map不为null时才执行更新逻辑，既避免重复创建地图，又能同步location变化。

关键总结 #

• React的setState是异步批量更新的，更新后的状态一定会在下一次渲染中生效，但如果有多个更新触发（比如location更新和setMap），React会合并处理，导致中间渲染可能还没拿到最新的map值。
• 不要用useState的状态作为useEffect的依赖来控制初始化逻辑，改用ref跟踪初始化状态更可靠，因为ref的更新是同步的，不受渲染批次影响。

内容的提问来源于stack exchange，提问作者smellofgaz