# useWishlist (https://docs.salla.dev/twilight/react/hooks/use-wishlist)



Use `useWishlist` for a heart button, a wishlist counter or any "is this saved?" check. Every component that calls it sees the same list.

## Example [#example]

```tsx title="app/components/product/WishlistButton.tsx"
import { useWishlist } from '@salla.sa/twilight-theme-engine/hooks/useWishlist';

export function WishlistButton({ productId }: { productId: number }) {
  const { has, toggle, loading } = useWishlist();
  return (
    <button onClick={() => toggle(productId)} disabled={loading} aria-pressed={has(productId)}>
      {has(productId) ? 'Remove from wishlist' : 'Add to wishlist'}
    </button>
  );
}
```

## API [#api]

```ts
function useWishlist(): UseWishlistResult;
```

| Prop      | Type                               | Description                                                                           |
| --------- | ---------------------------------- | ------------------------------------------------------------------------------------- |
| `ids`     | `number[]`                         | Product ids currently in the wishlist.                                                |
| `count`   | `number`                           | Number of ids.                                                                        |
| `has`     | `(id: number) => boolean`          | Whether a product is in the wishlist.                                                 |
| `add`     | `(id: number) => Promise<boolean>` | Adds a product through the Salla SDK. Resolves `true` on success, `false` on failure. |
| `remove`  | `(id: number) => Promise<boolean>` | Removes a product. Resolves `true` on success, `false` on failure.                    |
| `toggle`  | `(id: number) => Promise<boolean>` | Removes the product if it is in the list, otherwise adds it.                          |
| `loading` | `boolean`                          | `true` while an add or remove is running.                                             |
| `error`   | `string \| null`                   | Message of the last failure, or `null`.                                               |

## Gotchas [#gotchas]

* On the server and during hydration `ids` is empty, so a "saved" state appears only after the page loads in the browser.
* All components share one store. The SDK listeners are registered once, and every `useWishlist()` updates together, including when the SDK adds or removes an item elsewhere.
* The list is kept in the browser's storage under `salla::wishlist`.
* `add`, `remove` and `toggle` call `Salla.wishlist`. Without the SDK, the id is still tracked locally.
* For a guest, Salla shows its own "log in" notice and saves nothing: `add` and `toggle` resolve `false`, and `error` holds the SDK's message.

## Next [#next]

* [`ProductCard`](https://docs.salla.dev/twilight/react/components/product-card) already includes a wishlist button.
* [React to cart events](https://docs.salla.dev/twilight/react/recipes/react-to-cart-events) shows how to listen to SDK events.
* [Salla SDK and events](https://docs.salla.dev/twilight/react/guide/salla-sdk-and-events)