Оптимізація використання useState і useEffect у React.js для оновлення розміру кошика

6 Березня 2024 в 19:21 215

У React.js розробники часто зустрічаються з необхідністю оновлення стану компонентів відповідно до змін у додатку.
Одним із типових сценаріїв є оновлення розміру кошика покупок на основі кількості елементів, які користувач додав до кошика.
Для досягнення цієї мети, розробники використовують useState та useEffect. Проте, іноді можуть виникати проблеми з оновленням
даних через ці хуки.

Уявімо, що у нас є компонент Bikes, який відповідає за відображення списку велосипедів та можливість додавання їх до кошика покупок.
Для збереження стану кошика ми використовуємо useState, а для оновлення розміру кошика — useEffect.

    const [Cart, setCart] = useState([]);
    const [Csize, setSize] = useState(0);
    useEffect(() => {
        setSize(Cart.length);
        console.log("updated size", Csize); // Log the updated size directly
    }, [Cart]);
    const handleClick = (item) => {
        // Check if the item is already present in the cart
        const isPresent = Cart.some(cartItem => cartItem.id === item.id);
        if (isPresent) {
            return;
        }
        // Update Cart state by adding the new item
        setCart([...Cart, item]);
        console.log(Csize);
    }

const [Cart, setCart] = useState([]);

const [Csize, setSize] = useState(0);

useEffect(() => {

setSize(Cart.length);

console.log("updated size", Csize); // Log the updated size directly

}, [Cart]);

const handleClick = (item) => {

// Check if the item is already present in the cart

const isPresent = Cart.some(cartItem => cartItem.id === item.id);

if (isPresent) {

return;

}

// Update Cart state by adding the new item

setCart([...Cart, item]);

console.log(Csize);

}

Проте, іноді може виникати проблема з оновленням Csize. Навіть після додавання елементів до кошика, Csize залишається рівним 0.

Одним із способів вирішення цієї проблеми є використання функції замикання у setCart, щоб гарантувати оновлення Csize з
актуальним значенням. Модифікація функції handleClick виглядатиме наступним чином:

    const handleClick = (item) => {
        // Check if the item is already present in the cart
        const isPresent = Cart.some(cartItem => cartItem.id === item.id);
        if (isPresent) {
            return;
        }
        // Update Cart state by adding the new item
        setCart(prevCart => [...prevCart, item]);
    }

const handleClick = (item) => {

// Check if the item is already present in the cart

const isPresent = Cart.some(cartItem => cartItem.id === item.id);

if (isPresent) {

return;

}

// Update Cart state by adding the new item

setCart(prevCart => [...prevCart, item]);

}

За допомогою цієї модифікації, Csize буде оновлюватись із правильним значенням кожного разу, коли додається новий елемент до кошика.

У заключенні, використання useState і useEffect для оновлення даних у React.js є потужним інструментом, проте іноді вимагає
уважного підходу до роботи з ними, щоб уникнути непередбачуваних проблем, таких як некоректне оновлення стану компонентів.