CODEWITHSUNDEEP
javascriptreactjs
DennoFreezy
DennoFreezy

Reputation: 119

React: How can I get a count up to load only once?

I have a small account balance component that counts up the current balance of a user using react-countup.

enter image description here

This component is used on multiple pages, and I want the component to conduct the count-up only once, on the first time it is loaded. While the documentation and functionalities are extensive, I've been struggling to find a functionality such as 'Load Once' in the documentation.

How can I limit the load up to the very first time it's triggered?

<h1 className="text-3xl mb-5 md:mb-0 lg:-mb-0 2xl:mb-0 text-white">
            <CountUp duration={2.75}  separator="." start={0.00} end={29348.92}/></h1>
            </div>
            <h1 className="ml-2 text-white">CHF</h1>

Upvotes: 0

Views: 3511

Answers (2)

user12288662
user12288662

Reputation:

Instead of starting the Counter like that just use the manual method.

Manually start with render prop section shows the code you need to use.

Make an invisible div or something else that you can use an "onClick" method that calls "start". Then you can control whenever the action is triggered by making a ref to that div and call his onClick method.

I would use "useEffect" to call it when the page is first loaded

Upvotes: 2

omkobass
omkobass

Reputation: 316

If it's changing while you're on the page it's most likely rerendering in which case you should use the useEffect hook to control it.

If you want it to count up the first time and then stop counting up when you reload the page you can use localStorage to know save that it has been counted up and then when you reload the page you can check inside the localStorage to see if you should count it up again or not.

Upvotes: 1

Related Questions