CountUp starts over on re-renders

I have a functional component that draws a chart and overlays a CountUp on top.

<CountUp className="kpi-text" start={0} end={value} suffix={props.suffix} formattingFn={formatGrouping} duration={4} />

How can I make the CountUp only render if the start or end value have changed?

[mmarkelov]

Thanks guys! I could reproduce it and already fixed this. It should be fine in 6.0.0-1. And I think that i’ll publish this as stable release soon

[kershnerd]

Even though my props didn’t change, my component re-rendered higher up the tree which caused my component that had the CountUp to re-animate.

I wasn’t able to fix this directly but using a memoization seemed to work.

Import memo from react:

import React, { useEffect, memo } from 'react';

At the bottom when you export your component:

export default memo(AveragePeopleInLine);

This will force the component to not re-render if the props have not changed.