> ## Documentation Index
> Fetch the complete documentation index at: https://weaverse.io/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# useParentInstance

> Hook for accessing the parent component instance in Weaverse Next.js components.

# useParentInstance

The `useParentInstance` hook looks up the current component's parent item store in the Weaverse runtime.

## Import

```tsx theme={null}
import { useParentInstance } from '@weaverse/next'
```

## Type

```typescript theme={null}
function useParentInstance(): WeaverseItemStore | null
```

## Returns

* `WeaverseItemStore | null` — The parent item store, or `null` when the lookup does not find an instance.

<Note>
  In SDK v5.19.1, a missing parent ID falls back to the current item because `useParentInstance()` delegates to `useItemInstance(parentId || '')`. Root components therefore receive their own item store rather than `null`.
</Note>

## Common Use Patterns

### Accessing Parent Loader Data

```tsx theme={null}
'use client'

import { useParentInstance } from '@weaverse/next'

export function ProductItems() {
  const parent = useParentInstance()
  const products = parent?.data.loaderData?.products

  if (!products) return null

  return (
    <div className="product-grid">
      {products.nodes.map((product) => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  )
}
```

### Reading Parent Configuration

```tsx theme={null}
'use client'

import { useParentInstance } from '@weaverse/next'

export function ReviewItem() {
  const parent = useParentInstance()

  if (!parent) return null

  const { showVerifiedBadge, verifiedBadgeText, showDate } = parent.data

  return (
    <div className="review-item">
      {/* Review content */}
      {showVerifiedBadge && (
        <span className="verified-badge">{verifiedBadgeText}</span>
      )}
      {showDate && <div className="review-date">{/* Date content */}</div>}
    </div>
  )
}
```

## Implementation Details

```tsx theme={null}
export let useParentInstance = () => {
  let { parentId } = useContext(WeaverseItemContext)
  return useItemInstance(parentId || '')
}
```

The empty-string fallback is significant because `useItemInstance()` treats a falsy ID as a request for the current item.

## When To Use

* When a child component needs data or configuration from its parent
* When implementing coordinated parent-child behavior
* When a child's rendering depends on parent state

## Related

* [useItemInstance](/docs/nextjs/api/use-item-instance) - Access a specific component instance
* [useChildInstances](/docs/nextjs/api/use-child-instances) - Access child component instances
* [useWeaverse](/docs/nextjs/api/use-weaverse) - Access the Weaverse runtime


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.