Animation is not triggered when prop changes

[mickdewald]

NumberFlow version

0.5.5

Framework version

next 15.1.6

Describe the bug and the steps to reproduce it

I am trying to use NumberFlow in a table cell in a React Table (TanStack Table).
But when the value changes, the new value will only be displayed without an animation. onAnimationsStartis never fired.
But the animation does work, when I use

  useRootClick(() => {
    const random = Math.random() * 100;
    setStockValue(random);
  });

so it's working, but not when the prop changes.

I tried various things, like using key, memo etc, but I am out of ideas.

Where is my mistake?

export const lastPriceColumn = <T,>(t: any, collection: string, locale: string): ColumnDef<T> => ({
  id: "last_price",
  accessorFn: (row) => (row as any).last_price,
  header: (context) => (
    <ColumnHeader
      collection={collection}
      headerContext={context}
      title={t("columns.price")}
      subtitle={t("columns.currentPrice")}
    />
  ),
  cell: ({ row }) => {
    const currentPrice = row.getValue("last_price") as number;
    const previousPrice = (row.original as any).previous_price || 0;
    const currency = (row.original as any).currency_name?.toUpperCase() || "USD";

    if (!currentPrice) return <p className="flex justify-end pr-8 text-[95%]">–</p>;

    return (
      <div className="truncate pr-8 text-right text-[95%]">
        <NumberMotion
          // key={`${currentPrice}-${previousPrice}`}
          currency={currency}
          currentPrice={currentPrice}
          previousPrice={previousPrice}
          locale={locale}
        />
      </div>
    );
  },
  size: 100,
});

//
// https://number-flow.barvian.me/
export function NumberMotionDEMO3({ currency, currentPrice, locale }: NumberMotionProps) {
  //   console.log("[NumberMotionDEMO3]");
  const canAnimate = useCanAnimate(); // true

  // State
  const [stockValue, setStockValue] = useState(currentPrice);
  const prevStockValue = usePrevious(stockValue);

  useRootClick(() => {
    const random = Math.random() * 100;
    setStockValue(random);
  });

  // Determine if the stock price change is positive (strictly greater than)
  const isPositiveChange = Number(stockValue) > Number(prevStockValue);

  // ----------------------------------------------------------------------------------------------
  // JSX
  // ----------------------------------------------------------------------------------------------

  return (
    <span
      // key={stockValue}
      className={`inline-block rounded ${isPositiveChange ? "text-success" : "text-destructive"}`}
    >
      <NumberFlow
        // key={`${stockValue}-${prevStockValue}`}
        willChange={true} // Force change?
        onAnimationsStart={() => {
          console.log("[NumberMotion][onAnimationsStart]");
        }}
        value={stockValue}
        locales={locale}
        trend={0}
        prefix={`${currency} `}
        format={{
          style: "decimal",
          minimumFractionDigits: 2,
          maximumFractionDigits: 2,
        }}
        transformTiming={{ duration: 400, easing: "ease-out" }}
        spinTiming={{ duration: 300, easing: "ease-in-out" }}
        className={`inline-block rounded px-1.5 py-0.5 ${isPositiveChange ? "animate-single-pulse-success" : "animate-single-pulse-destructive"}`}
      />
    </span>
  );
}

Minimal reproduction

https://codesandbox.io/p/sandbox/px8sn9

[mickdewald]

Here is the sandbox
https://codesandbox.io/p/sandbox/px8sn9

[barvian]

Hi, thanks for the repro 👋. It appears the issue is that React is recreating the component here instead of updating it. You can see it in this fork if you open the console. Not sure what a workaround is, but if that's the issue it's not NumberFlow's so I'll convert this to a discussion for now.

[liho00]

@barvian @mickdewald hi did you found any solution yet?