onChange calling a parent function: strange behavior; can't read parent state

[joshon]

Hi,

I am using @react-spring/three. I am trying to call a parent function passed down into a child from useSpring's onChange. The function sets some state variables. The changes go through, but when I try to read the state values I just see their original values. This is not simply a case of not seeing the immediate update because React queues the state changes. The next time the function is called I still see the original value.

Here is an example - sorry it has a little more going on but is a lot simpler than my project!
https://codesandbox.io/s/practical-wright-mxu0y

The key snippets

The useSpring is in Obj.jsx and I call the updateVar - (passed in from the parent), onChange:

 const [spring, api] = useSpring(() => ({
    position: pos,
    scale: 1,
    rotation: [0, 0, 0],
    config: { friction: 10 },
    onChange: (props) => {
      updateVar(props.value.position[0]);
    }
  }));

The updateVar function in App.js is where I see the odd behavior (which I think probably has something to do with scope?!)

 const [aVariable, setAVariable] = useState(0);
 const [lastTimeUpdated, setLastTimeUpdated] = useState(0);

 const updateVar = (value) => {
    setAVariable(value);
    let now = Date.now();
    console.log(
      "updateVar aVariable: ", aVariable, " lastTimeUpdated: ", lastTimeUpdated, "<<<< WHY IS THIS NOT CHANGING?"
    );
    if (now - lastTimeUpdated > 30) {
      console.log("updateVar setLastTimeUpdated to now: ", now);
      setLastTimeUpdated(now);
    }
  };

  useEffect(() => {
    console.log("useEffect lastTimeUpdated: ", lastTimeUpdated);
  }, [lastTimeUpdated]);

Why can't I read the current state vars from the updateVar function?

I am not sure if this is a react-spring issue, or me just not understanding something generic in JS or React, but I posted the question here thinking it might be something other's here have faced.

[joshuaellis]

Because the spring memoizes props. To access the new state in app.jsx the function needs to be updated so you can use useCallback and pass lastTimeUpdated as a dependancy. Then in Obj.jsx you pass updateVar as a dependency to make sure that onChange is calling the most up to date version of the function.

This is similar to calling functions in useEffect. You normally get a warning about it because it won't be in the deps and if it is in the deps and not wrapped in useCallback it'll complain again declaring that whenever the function updates (on every render of the component) the effect will fire.

Here's some helpful docs that might explain it better than I did:

• https://kentcdodds.com/blog/usememo-and-usecallback
• https://react-spring.io/basics#dependency-arrays
• https://reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback

I hope this helps.

Here is an updated sandbox demonstrating what I was saying – https://codesandbox.io/s/youthful-star-7qi95?file=/src/Obj.jsx:775-784

[joshon]

Thank you so much for the thorough answer, it makes a lot of sense!