How to prevent useEffect re-rendering twice

Question

I am working on my React skills and I would appreciate if you recommend me a better way of writing React code.

Here is a simple task I am currently working on: https://codepen.io/cjanes/pen/qBVaPZx?editors=0011

As you can see, in order to calculate the total price of the checked products, I need to get the array checkedItems. I choose to keep track of it inside a useEffect in TotalPrice component.

The problem is this: The TotalPrice component gets re-rendered twice, first with the last value, and then with the new calculated value.

How can I refactor my code so that it is more optimized?

Lots of time a useEffect can be useMemo which has one less render cycle. — morganney
– morganney, Commented Feb 4, 2022 at 15:00

Nicholas Tower · Accepted Answer · 2022-02-04 15:15:51Z

1

My recommendation is that total should not be a state. Instead, it's just a derived value which you calculate from checkedItems. This makes it so that the total is always in sync with the items, and gets rid of the extra render from setting the total state:

const TotalPrice = ({ checkedItems }) => {
    let total = 0;
    checkedItems.forEach(item => total += item.price);

    console.log('TotalPrice component renders', 'total:', total)

    return ( 
        <>
            <p>Total Price is: {total}</p>
        </>
    );
}

If calculating the total was an expensive operation, you could memoize the calculation so you only repeat it when checkedItems changes:

const TotalPrice = ({ checkedItems }) => {
    const total = useMemo(() => {
        let sum = 0;
        checkedItems.forEach(item => sum += item.price);
        return sum;
    }, [checkedItems]);

edited Feb 4, 2022 at 15:15

answered Feb 4, 2022 at 14:58

Nicholas Tower

87k10 gold badges115 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Lukáš Moravec Over a year ago

Exactly, if total remains a state, the will always be 2 renders of TotalPrice component, since one re-render if forced by the parent changing state and the second one, as different props are passed to TotalPrice, you invoke a callback that changes it's state, forcing rerender.

ssunsset Over a year ago

Thank you, first example does the job. As for the second example, won't the function always run anyway because it depends on checkedItems which changes on every checkbox click?

Nicholas Tower Over a year ago

Yes, if checkedItems changes on ever render, the memoization will be useless. I just included it so you're aware of it for more complicated cases.

Collectives™ on Stack Overflow

How to prevent useEffect re-rendering twice

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related