---
title: "Reactivity in Solid.js"
description: "Use Solid.js signals with useHead() for reactive head tags. Pass getter functions and createResource() for async data."
canonical_url: "https://unhead.unjs.io/docs/solid-js/head/guides/core-concepts/reactivity"
last_updated: "2026-06-30T06:55:01.906Z"
---
**Quick Answer:** In Solid, use signals with `useHead()` inside `createEffect()`. Pass getter functions for reactive values. Head tags update automatically with signal changes.
## Introduction
Unhead integrates seamlessly with Solid.js's fine-grained reactivity system. This guide explains how to effectively manage reactive head tags in your Solid.js applications.
## How Does Unhead Work in Solid.js?
Unhead for Solid.js leverages Solid's reactive primitives including signals, effects, and contexts to provide a reactive head management solution. When your application state changes, Solid.js's reactivity system automatically ensures your head tags reflect the current state.
## How Do I Set Up UnheadContext?
Unhead uses Solid.js's Context API to provide head management throughout your component tree:
```tsx
import { createHead, UnheadContext } from '@unhead/solid-js/client'
import { render } from 'solid-js/web'
import App from './App'
const head = createHead()
render(() => (
), document.getElementById('root'))
```
This pattern keeps head state contained and manageable, making components more testable and preventing hydration issues.
## How Do I Use Signals with useHead()?
Solid.js's signals work naturally with Unhead. When you pass signals to `useHead()`, the head tags update whenever the signal values change:
```tsx
import { useHead } from '@unhead/solid-js'
import { createSignal } from 'solid-js'
function PageHead() {
const [title, setTitle] = createSignal('Welcome to My App')
// Head tags will update when title signal changes
useHead(() => ({
title: title()
}))
return (
)
}
```
### Direct Signal Integration
You can also pass signals directly to `useHead()`:
```tsx
import { useHead } from '@unhead/solid-js'
import { createSignal } from 'solid-js'
function PageHead() {
const [title, setTitle] = createSignal('Welcome to My App')
const [description, setDescription] = createSignal('My site description')
useHead({
get title() { return title() },
meta: [
{
name: 'description',
get content() { return description() }
}
]
})
return (
<>
)
}
```
## How Do I Update Head Tags with Async Data?
It's common to update head tags based on asynchronous data:
```tsx
import { useHead } from '@unhead/solid-js'
import { createResource, createSignal } from 'solid-js'
async function fetchPageData(id) {
const response = await fetch(`/api/page/${id}`)
return response.json()
}
function PageHead({ id }) {
const [pageData] = createResource(() => id, fetchPageData)
useHead(() => ({
title: pageData()?.title || 'Loading...',
meta: [
{
name: 'description',
content: pageData()?.description || 'Loading page content...'
}
]
}))
return null
}
```
## How Do I Manage Multiple Meta Tags Together?
For pages with multiple meta tags, you can manage them together with Solid.js's reactive primitives:
```tsx
import { useHead } from '@unhead/solid-js'
import { createResource } from 'solid-js'
async function fetchProduct(id) {
const response = await fetch(`/api/products/${id}`)
return response.json()
}
function ProductHead({ id }) {
const [product] = createResource(() => id, fetchProduct)
useHead(() => ({
title: product()?.title || 'Loading Product...',
meta: [
{ name: 'description', content: product()?.description || '' },
{ property: 'og:image', content: product()?.image || '/placeholder.jpg' },
{ property: 'product:price', content: product()?.price || '' }
]
}))
return null
}
```
## How Do I Create Reusable Head Components?
Solid.js's composable nature makes it easy to create reusable head components:
```tsx
import { useHead } from '@unhead/solid-js'
import { mergeProps } from 'solid-js'
function SEOHead(props) {
const merged = mergeProps({
title: 'Default Title',
description: 'Default description',
ogImage: '/default-og.jpg'
}, props)
useHead(() => ({
title: merged.title,
meta: [
{ name: 'description', content: merged.description },
{ property: 'og:title', content: merged.title },
{ property: 'og:description', content: merged.description },
{ property: 'og:image', content: merged.ogImage }
]
}))
return null
}
// Usage
function HomePage() {
return (
{/* Page content */}
)
}
```
## How Do I Conditionally Render Head Tags?
You can leverage Solid.js's control flow primitives to conditionally render head tags:
```tsx
import { useHead } from '@unhead/solid-js'
import { createEffect, createSignal, Show } from 'solid-js'
function DynamicHead() {
const [isLoggedIn, setIsLoggedIn] = createSignal(false)
const [user, setUser] = createSignal(null)
// Simulate login
const login = () => {
setUser({ name: 'John Doe', id: '123' })
setIsLoggedIn(true)
}
createEffect(() => {
if (isLoggedIn()) {
useHead({
title: `Dashboard - ${user().name}`,
meta: [
{ name: 'description', content: 'Your personal dashboard' }
]
})
}
else {
useHead({
title: 'Login',
meta: [
{ name: 'description', content: 'Login to access your dashboard' },
{ name: 'robots', content: 'noindex' }
]
})
}
})
return (
Login}>
Welcome,
{user().name}
!
)
}
```
## How Does Unhead Work Under the Hood?
Under the hood, Unhead in Solid.js:
1. Uses Solid.js's Context API for head instance management
2. Integrates with Solid.js's reactivity system using `createEffect`
3. Creates head entries that update reactively when input props change
4. Automatically cleans up with `onCleanup` when components are disposed
The implementation wraps head entries with Solid.js's reactive primitives that:
- Patch the entry when input data changes
- Dispose of the entry when the component is disposed
## What Are the Best Practices?
1. **Leverage Solid.js's Reactivity**: Use signals, memos, and resources for reactive head data.
2. **Handle Loading States**: Always provide fallback values for async data to prevent undefined errors.
3. **Use Component Composition**: Compose multiple head components for complex pages:
```tsx
function ProductPage(props) {
return (
<>
{/* UI components */}
)
}
```
1. **Keep Head Components Focused**: Create dedicated components for head management that are separate from UI components.
2. **Cleanup Happens Automatically**: Unhead handles cleanup when components are disposed through Solid.js's cleanup system.