React useEffect 钩子注册回调，可以访问状态

Question

I´m creating a new instacne of a map component in the useEffect hook with second parameter [] so it only runs once.

After creating the instance I want to register a callback, which is fired if the user interacts with the map. Inside this callback I want to access the state of my component. How can I do this, without causing a loop? If I don´t add my state to the second parameter the state stays the same with every run of the callback (as expected), but if I add it, I cause a loop.

export const Map = (props: any) => {
const [state, setState]: [MapState, any] = useGlobalState({
    id: 'MAP',
    initialValue: getInitialValue(initialized),
});

useEffect(() => {
    mapInstance = new mapFramework.Map(});
    mapInstance.on('move', () => {
        console.log(state);
    });
}, []);
}

Answer 1

You can use useRef

export const Map = (props: any) => {
const [state, setState]: [MapState, any] = useGlobalState({
    id: 'MAP',
    initialValue: getInitialValue(initialized),
});
const stateRef = useRef(state)

useEffect(()=>{
    stateRef.current = state
}, [state])

useEffect(() => {
    mapInstance = new mapFramework.Map(});
    mapInstance.on('move', () => {
        console.log(stateRef.current)
    });
}, []);
}