在 useEffect 挂钩中定义的 function 中的 State 变量在值更改时不会更新

Question

I have a project where I need to measure the height of DOM elements, then set that value in a useState hook and finally use the state value in a useEffect hook. However, the value that I define in useState (named maxTranslate ) is used within a function. Even though I add maxTranslate as a dependency to useEffect , the value of maxTranslate inside the function does not change from its initial value of -440 . I can confirm that the useEffect is being triggered on maxTranslate state change though.

I obviously think this has to do with stale closures but since it is re-rendering, I'm not quite sure why. What am I missing?

I first define a useState :

// state variable that defines a default maxTranslate value
const [maxTranslate, setMaxTranslate] = useState(-440)

Here I define a useEffect that takes in 3 DOM refs and calculates their getBoundingClientRect().height

// useEffect to calculate the height of 3 DOM elements
// please let me know if there there's a better semantic way of doing something like this

useEffect(() => {
      setMaxTranslate((-1 * ((pageSize?.height || 0) - (previewSize?.height || 0) - (headerSize?.height || 0))))
  }, [pageSize, previewSize, headerSize])

Next, is my useEffect that takes in maxTranslate as a dependency. I can console.log the maxTranslate in here and confirm that the value updates properly.

// when maxTranslate changes from the useEffect above, the useEffect below will fire again
useEffect(() => {

let started: boolean = false;
let initialStep: number = 0;

const square = Array.from(animationEl.current!.nodes.values())[0];

const swipeGesture = createGesture({
    el: square,
    gestureName: 'swipeGesture',
    direction: 'y',
    threshold: 0,
    onMove: (ev) => onMove(ev),
    onEnd: (ev) => onEnd(ev),
});
swipeGesture.enable(true);

const onMove = (ev: GestureDetail) => {
    if (!started) {
    setProgressStart({ forceLinearEasing: true });
    started = true;
    }
    setProgressStep({ step: getStep(ev) });
};

const onEnd = (ev: GestureDetail) => {
    if (!started) {
    return;
    }

    swipeGesture.enable(false);

    const step = getStep(ev);
    const shouldComplete = step > 0.25;

    setProgressEnd({ playTo: shouldComplete ? 1 : 0, step });

    setOnFinish({
    callback: () => {
        swipeGesture!.enable(true);
        setProgressStart(undefined);
        setProgressStep(undefined);
        setProgressEnd(undefined);
    },
    opts: { oneTimeCallback: true },
    });

    initialStep = shouldComplete ? maxTranslate : 0;
    started = false;
};


const getStep = (ev: GestureDetail) => {
    const delta = initialStep + ev.deltaY;
      // THIS VALUE OF maxTranslate DOES NOT CHANGE FROM THE INITIAL VALUE OF -440 THOUGH!
    return clamp(0, delta / maxTranslate, 1);
};

}, [animationEl, maxTranslate]);

My getStep function should be getting redefined once the page re-renders and closes over the scope of the most recent value of maxTranslate , correct? What's going on here? Thanks!

---

EDIT: added full useEffect

Answer 1

The issue here is that you aren't cleaning up the previous listeners created with createGesture when the useEffect runs again due to change in maxTranslate value

So when you don't do that, even though the component isn't needing those old listeners they still do continue to exist and are not garbage collected since their reference in not lost

Hence the getStep method was called with old value as it fired for the previous listener

Its always advices that you clear your subscriptions and listeners in cleanup function of useEffect

useEffect(() => {
   ...
   return () => {
        swipeGesture.destroy();
   }

}, [animationEl, maxTranslate])