UseEffect and SetInterval, creating infinite loop and refreshing the session

Question

I want to keep making my request because whenever I add an item to my cart, the carticon which displays the amount of items in the cart has to update. But this keeps refreshing my session, so when I put this to production you it becomes laggy. I want to solve this by running it maybe once, and not onclick because the components which could be doing this on click, are just not connected with eachother.

export default function Header({ props }) {
const pollingRef = useRef(0);

const [newItemState, setNewItemState] = useState(0);

    const [itemsState, setItemsState] = useState(props.cart);
    let finalquantity = itemsState.map((item) => item?.quantity || 0);
    // console.log(finalquantity);

    
    const updateCartAmount = async () => {
        try {
            let itemQuantities = itemsState.map((item) => item?.quantity || 0);
            let newItemState = itemQuantities.reduce((acc, sum) => acc + sum, 0);
            console.log(newItemState);

            const response = await axios.get('/cartjson');
            setItemsState(response.data);
            setNewItemState(newItemState);
        } catch (error) {
            console.error('Failed to update cart', error);
        }
    };
    
useEffect(() => {
        pollingRef.current = setInterval(() => {
            updateCartAmount();
            // console.log('polling');
    }, 2000)

    return () => {
        clearInterval(pollingRef.current)
    }
    }, []);

Im using Inertia and i found something about UseRemember but i dont really know if thats something what could solve this. I want to update the quantity but NOT the session tokens

Drownie · Accepted Answer · 2024-12-19 15:09:01Z

1

First thing first, I see you create the interval every 2 seconds and it is used to fetch from Api from time to time i believe this is the reason for the lag.

Also I think if you want to update the amount of item in the cart icon you can make the state in the parent or the top of the component instead and pass the count to the component props. So whenever the state updated the component props become updated too.

answered Dec 19, 2024 at 15:09

Drownie

111 bronze badge

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

6 Comments

Poplawski0411 Dec 20, 2024 at 10:51

But the problem is how, My Header is rendered everywhere on the page from app.jsx, i need the function to be everywhere, to pass a function to a component i need to do onRemove={onRemove} for example.

Drownie Dec 20, 2024 at 13:20

I think you should try to useContext because it is accessible everywhere just by using useContext syntax and you can store variable in there, and i think it is much faster than API

Poplawski0411 Dec 20, 2024 at 14:37

Its accessible in parent and children relations ship, my header which needs to be updated isnt a child or parent, its just a loose component which is used everywhere since its a navbar

Drownie Dec 21, 2024 at 6:59

If you place contextProvider in the root component then you can access the context from everywhere.

Poplawski0411 Dec 23, 2024 at 9:39

But its not about getting the data, its about pressing a button and on shopitem to add it, and making a request on the same page but in a differenent component and live refreshing the amout of items in the cart, cart is in the header

|

Collectives™ on Stack Overflow

UseEffect and SetInterval, creating infinite loop and refreshing the session

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related