使用 useEffect 通过更新 state 来触发重新渲染，但不能在依赖数组中包含 state？

Question

function Map({latitude, longitude, markers}: MapProps) {

    const [currentZoom, setCurrentZoom] = useState(14);
    const sizeRef = useRef(null);

    useEffect(() => {
        const height = sizeRef.current.clientHeight;
        const width = sizeRef.current.clientWidth;
        const zoom = calculateZoomLevel(markers, height, width);
        setCurrentZoom(zoom);
    }, []);

    function onMapChange({zoom}: ChangeEventValue) {
        if (currentZoom !== zoom) {
            setCurrentZoom(zoom);
        }
    }

    return (
        <div ref={sizeRef}>
            <GoogleMapReact
                defaultCenter={{
                    lat: latitude,
                    lng: longitude
                }}
                zoom={currentZoom}
                onChange={onMapChange}
            >
                markers.map(function(marker) {
                    return (<Marker name={marker.name}/>
                });
            </GoogleMapReact>
        </div>
    );
}

I am using google-map-react with my web app and I am trying to calculate the zoom such that all the map markers are visible on the map, the calculateZoomLevel function uses the google-map-react API and requires the dimensions of the map in order to calculate the required zoom level. Since I am using server-side rendering I must wait until the React component has mounted until I am able retrieve the dimensions of the map. I cannot use the window.innerHeight/Width property.

Therefore, in theory, I must initially render the page with a default zoom level for the map, then once it is mounted I can retrieve the component dimensions, calculate the intended zoom level and then trigger a re-render of the map. I am using functional components along with useEffect in order to try and achieve this.

THIS DOES NOT WORK

const [currentZoom, setCurrentZoom] = useState(14);

useEffect(() => {
    const height = sizeRef.current.clientHeight;
    const width = sizeRef.current.clientWidth;
    const zoom = calculateZoomLevel(markers, height, width);
    setCurrentZoom(zoom);
}, []);

HOWEVER THIS DOES

const [currentZoom, setCurrentZoom] = useState(14);

useEffect(() => {
    const height = sizeRef.current.clientHeight;
    const width = sizeRef.current.clientWidth;
    const zoom = calculateZoomLevel(markers, height, width);
    setCurrentZoom(zoom);
}, [currentZoom]);

This would be fine, however the problem is that now useEffect is triggered every time that the zoom level is changed on the map (ie: when onMapChange is called). When I have an empty dependency array, the useEffect runs once after initial render, but does not properly trigger the a re-render with the updated zoom level which was just calculated. It seems that I have to have the currentZoom state inside the dependency array for the changes to propagate, but I still have to preserve the functionality of allowing the user to change the zoom on the map.

Answer 1

You should put currentZoom in Ref

  <GoogleMapReact
            defaultCenter={{
                lat: latitude,
                lng: longitude
            }}
            zoom={currentZoom.current}
            onChange={onMapChange}
        >

Note: setState runs asynchronously, ex: currentZoom = 14 while useEffect setting the currentZoom state. the GoogleMapReact renders but the currentZoom state is still 14 since setting state is not done yet