# useHook (https://docs.salla.dev/twilight/react/hooks/use-hook)



Use `useHook` when a component should add content to a [`HookSlot`](https://docs.salla.dev/twilight/react/hooks/hook-slot) somewhere else on the page, such as a shipping note under the add-to-cart form.

## Example [#example]

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

export function ShippingNote() {
  useHook('product:single.description.end', () => <p>Ships within 2 days.</p>);
  return null;
}
```

Render `<ShippingNote />` once under your layout, and every slot with that name shows the note.

## API [#api]

```ts
function useHook<T = Record<string, unknown>>(
  name: string,
  handler: HookHandler<T>,
  priority?: number
): void;

type HookHandler<T> = (context: T) => ReactNode;
```

| Prop        | Type                        | Description                                                                            |
| ----------- | --------------------------- | -------------------------------------------------------------------------------------- |
| `name`      | `string`                    | Slot name, such as `"header:end"`. `HookName` enum values are valid. Required.         |
| `handler`   | `(context: T) => ReactNode` | Receives the slot context and returns what to render, or `null` for nothing. Required. |
| `priority?` | `number`                    | Higher runs first. Default: `50`.                                                      |

The context holds what the slot passed in, plus `twilight` (store, theme and more).

## Gotchas [#gotchas]

<Callout type="warn">
  When the component unmounts, `useHook` removes only the handler it registered. Other handlers on the same slot, including the engine's own defaults, stay.
</Callout>

* The handler registers in an effect, so it runs in the browser only. Content added with `useHook` is not in the server-rendered HTML.
* The latest handler is always used, so it can read props and state without re-registering. Registration changes only when `name` or `priority` changes.
* For handlers that don't belong to a component, call `hookRegistry.register` or `defineHooks` from `@salla.sa/twilight-theme-engine/hooks/HookRegistry` at startup. This is how the starter theme does it, and it also works on the server.

## Next [#next]

* [`HookSlot`](https://docs.salla.dev/twilight/react/hooks/hook-slot) lists the slot names the engine renders.
* [Add content to a slot](https://docs.salla.dev/twilight/react/recipes/add-content-to-a-slot) walks through registering at startup.
* [Hooks and slots](https://docs.salla.dev/twilight/react/guide/hooks-and-slots) explains the two meanings of "hook".