React地图组件开发中useEffect更新状态触发重渲染的依赖项配置问题

• 空依赖useEffect完全失效的核心原因，并非状态更新无法触发重渲染：原代码里markers.map遍历标记时漏写了return，导致GoogleMapReact的children为空，组件渲染直接中断，状态更新的结果根本走不到渲染环节。
• 把currentZoom加入依赖数组的方案出现逻辑冲突，本质是把仅需执行一次的初始化适配缩放逻辑，和高频触发的用户交互状态同步逻辑捆绑在了同一个effect里。用户每次主动缩放地图，都会触发effect重复计算全量标记的适配缩放值，直接打断自主操作流程。

核心思路是用不触发重渲染的ref做执行标记，把两个独立逻辑的执行边界完全切开，既保证初始化计算能正常触发重渲染，又不会让交互操作反过来触发重复计算。
修正后的完整代码如下：

function Map({latitude, longitude, markers}: MapProps) {
    // 默认缩放值用于SSR首次渲染，保证无DOM环境下也能正常输出页面结构
    const [currentZoom, setCurrentZoom] = useState(14);
    const sizeRef = useRef(null);
    // 仅做逻辑判断的标记ref，值变更不会触发组件重渲染
    const hasFitZoomInitializedRef = useRef(false);

    // 空依赖数组，仅会在组件首次挂载完成后执行一次
    useEffect(() => {
        // 兼容StrictMode双执行特性，已经跑过适配计算就直接跳过
        if (hasFitZoomInitializedRef.current) return;
        // 此时DOM已挂载，可安全读取容器真实尺寸
        const containerHeight = sizeRef.current.clientHeight;
        const containerWidth = sizeRef.current.clientWidth;
        const fitZoom = calculateZoomLevel(markers, containerHeight, containerWidth);
        // 标记初始化已完成
        hasFitZoomInitializedRef.current = true;
        setCurrentZoom(fitZoom);
    }, []);

    // 仅做用户交互的缩放状态同步，不包含任何适配计算逻辑
    function onMapChange({zoom}: ChangeEventValue) {
        setCurrentZoom(prevZoom => prevZoom === zoom ? prevZoom : zoom);
    }

    return (
        <div ref={sizeRef} className="map-container">
            <GoogleMapReact
                defaultCenter={{
                    lat: latitude,
                    lng: longitude
                }}
                zoom={currentZoom}
                onChange={onMapChange}
            >
                {/* 补全map遍历的语法，保证标记能正常渲染 */}
                {markers.map(marker => (
                    <Marker key={marker.id} name={marker.name}/>
                ))}
            </GoogleMapReact>
        </div>
    );
}

方案关键特性说明 #

• 完全适配SSR场景：空依赖effect的执行时机固定为客户端组件挂载完成后，服务端渲染阶段用默认缩放值输出基础页面结构，不存在服务端拿不到DOM尺寸的报错。
• 不存在状态传递失效问题：effect内的setCurrentZoom会正常触发组件重渲染，把计算得到的适配缩放值传给GoogleMapReact，之前空依赖方案失效纯粹是原代码的map遍历语法bug导致的渲染中断，不是React状态机制的问题。
• 不干扰用户自主操作：因为初始化effect的依赖是空数组，后续不管用户怎么通过滚轮、拖拽、控件按钮调整缩放，都不会触发适配缩放的重复计算，只会通过onMapChange同步用户当前的缩放值。
• 无额外性能开销：用来做执行标记的ref不会触发重渲染，同时可以兼容React 18 StrictMode的双执行特性，保证适配计算只执行一次，不会出现重复setState的问题。

额外优化提示：如果后续需要支持容器尺寸自适应变化时重新计算适配缩放值，可以给sizeRef对应的容器加ResizeObserver监听，把尺寸变更的判断和初始化计算逻辑放在同一个effect里，依然不会干扰用户的自主缩放操作。

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