loadCart()

loadCart(cartDetails: CartDetails, shouldMerge?: boolean): void

import { useEffect } from 'react'
import { useShoppingCart } from 'use-shopping-cart'

function App() {
  const { loadCart } = useShoppingCart()

  useEffect(() => {
    // Load cart from your API
    async function loadUserCart() {
      const response = await fetch('/api/cart')
      const savedCart = await response.json()

      if (savedCart) {
        loadCart(savedCart, false) // Replace current cart
      }
    }

    loadUserCart()
  }, [loadCart])

  return <YourApp />
}

import { useEffect } from 'react'
import { useShoppingCart } from 'use-shopping-cart'
import { useUser } from './auth'

function CartSync() {
  const { loadCart } = useShoppingCart()
  const user = useUser()

  useEffect(() => {
    if (!user?.id) return

    let cancelled = false

    async function syncCart() {
      const response = await fetch(`/api/users/${user.id}/cart`)
      const userCart = await response.json()

      if (!cancelled && userCart) {
        loadCart(userCart, false)
      }
    }

    syncCart()

    return () => {
      cancelled = true
    }
  }, [user?.id, loadCart])

  return null
}

import { useEffect } from 'react'
import { useShoppingCart } from 'use-shopping-cart'

function CartPersistence() {
  const { cartDetails } = useShoppingCart()
  const user = useUser()

  useEffect(() => {
    if (!user?.id) return

    // Debounce saves
    const timeoutId = setTimeout(() => {
      fetch(`/api/users/${user.id}/cart`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ cartDetails })
      })
    }, 500)

    return () => clearTimeout(timeoutId)
  }, [cartDetails, user?.id])

  return null
}