How to render useSpring value?

[amirhhashemi]

I have a Counter component that receives a count prop and should update the current count to the new count with spring values.

I expected something like this to work:

const Counter = ({ count }) => {
  const springCount = useSpring(count)

  return <span>{springCount}</span>
}

But it doesn't. I have a few questions:

1. Should I use useMotionValue in this case? If yes why? The docs is a little ambiguous to me.

const motionCount = useMotionValue(count)
const springCount = useSpring(motionCount)

2. Does the component re-render when springCount changes?
3. How to get the current spring value even while it's animating?

[Albx68]

@amirhhashemi

https://codesandbox.io/p/sandbox/fast-sea-th2hgv?file=%2Fsrc%2FApp.tsx%3A7%2C1

I hope this works for you :D

you can look at this for reference https://www.framer.com/motion/animation/#animate-content

[amirhhashemi]

Thank you @Albx68.

I wish this line wasn't necessary and Framer Motion updated the spring value automatically:

setCount((p) => {
      spring.set(p + 10); // <---
      return p + 10;
});

I also want to add two things to your example:

1. Unfortunately the docs haven't clarified exactly where useMotionValue is needed but seems like it's not needed in your example.
2. I would use useEffect to update the spring value automatically. I think it's cleaner:

function App() {
  const [count, setCount] = useState(0);

  const increaseCount = () => {
    setCount(count + 10);
  };

  const decreaseCount = () => {
    setCount(count - 10);
  };

  return (
    <div className="App">
      <button onClick={increaseCount}>-10</button>
      <button onClick={decreaseCount}>+10</button>
      <Counter count={count} />
    </div>
  );
}

const Counter = ({ count }) => {
  const spring = useSpring(count);
  const rounded = useTransform(spring, (latest) => Math.round(latest));

  useEffect(() => spring.set(count), [spring, count]);

  return <motion.div>{rounded}</motion.div>
};