NextJS Hydration error about react-use-cart HOT 4 CLOSED

I think I have fixed the error when Using useState and useEffect hooks in reactjs.

from react-use-cart.

Hey @Soso966 there's another issue closed with some solutions to get around this with Next.js

#113

Happy to accept a PR if you have a solution that works for everyone.

from react-use-cart.

Hey @Soso966 there's another issue closed with some solutions to get around this with Next.js

#113

Happy to accept a PR if you have a solution that works for everyone.

I am planning to create a hook called useCartItem and this will compose using useState and useEffect instead of implementing them on each page.

from react-use-cart.

I managed to fix this issue by doing like the example below:

"use client";

import CartAdd from "./add-items"; // component
import CartContent from "./content"; // component
import { CartProvider } from "react-use-cart"; // lib
import { useEffect, useState } from 'react'; // lib

export default function CartPage() {
    const [isClient, setIsClient] = useState(false);

    useEffect(() => {
        // This will be executed only on the client side after the initial render
        setIsClient(true);
    }, []);

    // Render nothing on server-side
    if (!isClient) {
        return null;
    }

    return (
        <CartProvider>
            <CartContent />
            <CartAdd />
        </CartProvider>
    );

}

from react-use-cart.