Warning: Text content did not match. Server: "0" Client: "1" [duplicate]

Question

I am using next js to build the cart and I want to store all cart items in localStorage so I did it like that:

import React, { createContext, useContext, useState, useEffect } from 'react';
import { toast } from 'react-hot-toast';

const Context = createContext();

let getCart;

if (typeof window !== 'undefined') {
  console.log('You are on the browser');

 getCart = localStorage.getItem('items') !== 'undefined' ? 
 JSON.parse(localStorage.getItem('items')) : localStorage.clear();
// 👉️ can use localStorage here
} else {
console.log('You are on the server');
console.log(getCart);
// 👉️ can't use localStorage
}

export const StateContext = ({ children }) => {
const [showCart, setShowCart] = useState(false);
const [cartItems, setCartItems] = useState(getCart?.cartItems || [] );
const [totalPrice, setTotalPrice] = useState(getCart?.totalPrice || 0);
const [totalQuantities, setTotalQuantities] = useState(getCart?.totalQuantities || 0);
const [qty, setQty] = useState(1);

let foundProduct;
let index;

useEffect(() => {
    getCart = localStorage.setItem('items', JSON.stringify({cartItems, totalPrice, 
totalQuantities }));
}, [getCart]);


const onAdd = (product, quantity) => {
    const checkProductInCart = cartItems.find((item) => item._id === product._id);

    setTotalPrice((prevTotalPrice) => prevTotalPrice + product.price * quantity);
    setTotalQuantities((prevTotalQuantities) => prevTotalQuantities + quantity);

    if(checkProductInCart) {

        const updatedCartItems = cartItems.map((cartProduct) => {
            if(cartProduct._id === product._id) return {
                ...cartProduct,
                quantity: cartProduct.quantity + quantity
            }
        })

        setCartItems(updatedCartItems);
    } else {
        product.quantity = quantity;
        
        setCartItems([...cartItems, { ...product }]);
    }

    toast.success(`${qty} ${product.name} added to cart.`);

 }

 const onRemove = (product) => {
    foundProduct = cartItems.find((item) => item._id === product._id);
    const newCartItems = cartItems.filter((item) => item._id !== product._id);

    setTotalPrice((prevTotalPrice) => prevTotalPrice - foundProduct.price * 
  foundProduct.quantity);
    setTotalQuantities((prevTotalQuantities) => prevTotalQuantities - foundProduct.quantity);
    setCartItems(newCartItems);
    
 }

 const toggleCartItemQuantity = (id, value) => {
    foundProduct = cartItems.find((item) => item._id === id);
    index = cartItems.findIndex((product) => product._id === id);
    const newCartItems = cartItems.filter((item) => item._id !== id)

    if(value === 'inc') {
        setCartItems([ ...newCartItems, { ...foundProduct, quantity: foundProduct.quantity + 1 
  } ]);
        setTotalPrice((prevTotalPrice) => prevTotalPrice + foundProduct.price);
        setTotalQuantities((prevTotalQuantities) => prevTotalQuantities + 1);
    } else if(value === 'dec') {
        if(foundProduct.quantity > 1) {
            setCartItems([ ...newCartItems, { ...foundProduct, quantity: foundProduct.quantity 
   - 1 } ]);
            setTotalPrice((prevTotalPrice) => prevTotalPrice - foundProduct.price);
            setTotalQuantities((prevTotalQuantities) => prevTotalQuantities - 1);
        }
    }
    }

const incQty = () => {
    setQty((prevQty) => prevQty + 1);
}

const decQty = () => {
    setQty((prevQty) => {
        if(prevQty - 1 < 1) return 1;

        return prevQty - 1;
    });
}

return (
    <Context.Provider
        value={{
            showCart,
            setShowCart,
            cartItems,
            setCartItems,
            totalPrice,
            setTotalPrice,
            totalQuantities,
            qty,
            setTotalQuantities,
            incQty,
            decQty,
            onAdd,
            onRemove,
            toggleCartItemQuantity,
        }}
    >
        {children}
    </Context.Provider>
  )
  }

 export const useStateContext = () => useContext(Context);

and it's working but I get this error when I add the item to the cart and refresh the page:

Warning: Text content did not match. Server: "0" Client: "1"

and the cart has the item inside but I get this warning. so help me please fix this warning

Answer 1

Looks like a difference in content upon hydration.

Fairly common in React, if expected you can suppress the warning using

<div suppressHydrationWarning>Ignore this</div>