useValue

useValue is useState built for animation: it returns a value that updates outside React's render cycle, so animating it never re-renders your component.

Signature

function useValue<T>(initial: T): [AnimateValue<T>, (to: T | Descriptor) => void, Controls];

Controls (the third item) exposes start/pause/resume/cancel/reset for the animation most recently started via set.

Immediate vs. animated updates

const [width, setWidth] = useValue(100);

/* Snap instantly — no animation */
setWidth(200);

/* Animate with spring physics */
setWidth(withSpring(200));

Pass a bare value to snap instantly; wrap it in a modifier like withSpring to animate.

tip

Think of setWidth(200) as React state, and setWidth(withSpring(200)) as the animated version of the same update.

Preview

Numbers, strings, arrays, and objects

A single call animates every element/key together with one driver:

const [width, setWidth] = useValue(100);
const [color, setColor] = useValue('#60a5fa');
const [positions, setPositions] = useValue([0, 0, 0]);
const [style, setStyle] = useValue({ x: 0, y: 0 });

/* One spring drives every item / key together */
setPositions(withSpring([100, 100, 100]));
setStyle(withSpring({ x: 100, y: 100 }));

Preview

Preview

Next steps

• Animation Modifiers: withSpring, withTiming, and the rest.
• Interpolation: map a value into a different range or type (e.g. number → color).
• combine: derive one value from several others.