Reactivity in Solid.js · Unhead

[Unhead Home](https://unhead.unjs.io/ "Home")

- [Docs](https://unhead.unjs.io/docs/solid-js/head/guides/get-started/overview)
- [Tools](https://unhead.unjs.io/tools)
- [Learn](https://unhead.unjs.io/learn/guides/what-is-capo)

[Releases](https://unhead.unjs.io/releases)

Search…```k`` /`

[Unhead on GitHub](https://github.com/unjs/unhead)

[User Guides](https://unhead.unjs.io/docs/solid-js/head/guides/get-started/overview)

[API](https://unhead.unjs.io/docs/solid-js/head/api/get-started/overview)

[Releases](https://unhead.unjs.io/docs/solid-js/releases/v3)

Solid.js

- [Switch to Solid.js](https://unhead.unjs.io/docs/solid-js/head/guides/get-started/installation)
- [Switch to TypeScript](https://unhead.unjs.io/docs/typescript/head/guides/get-started/installation)
- [Switch to Vue](https://unhead.unjs.io/docs/vue/head/guides/get-started/installation)
- [Switch to React](https://unhead.unjs.io/docs/react/head/guides/get-started/installation)
- [Switch to Svelte](https://unhead.unjs.io/docs/svelte/head/guides/get-started/installation)
- [Switch to Angular](https://unhead.unjs.io/docs/angular/head/guides/get-started/installation)
- [Switch to Nuxt](https://unhead.unjs.io/docs/nuxt/head/guides/get-started/installation)

v3 (stable)

Head

- [Discord Support](https://discord.com/invite/275MBUBvgP)

- Get Started
  - [Overview](https://unhead.unjs.io/docs/solid-js/head/guides/get-started/overview)
  - [Introduction to Unhead](https://unhead.unjs.io/docs/solid-js/head/guides/get-started/intro-to-unhead)
  - [Starter Recipes](https://unhead.unjs.io/docs/solid-js/head/guides/get-started/starter-recipes)
  - [Installation](https://unhead.unjs.io/docs/solid-js/head/guides/get-started/installation)
  - [Upgrade Guide](https://unhead.unjs.io/docs/solid-js/head/guides/get-started/migration)
- Core Concepts
  - [Titles & Title Templates](https://unhead.unjs.io/docs/solid-js/head/guides/core-concepts/titles)
  - [Tag Sorting & Placement](https://unhead.unjs.io/docs/solid-js/head/guides/core-concepts/positions)
  - [Class & Style Attributes](https://unhead.unjs.io/docs/solid-js/head/guides/core-concepts/class-attr)
  - [Inline Style & Scripts](https://unhead.unjs.io/docs/solid-js/head/guides/core-concepts/inner-content)
  - [Tag Deduplication](https://unhead.unjs.io/docs/solid-js/head/guides/core-concepts/handling-duplicates)
  - [DOM Event Handling](https://unhead.unjs.io/docs/solid-js/head/guides/core-concepts/dom-event-handling)
  - [Script Loading](https://unhead.unjs.io/docs/solid-js/head/guides/core-concepts/loading-scripts)
  - [Reactivity](https://unhead.unjs.io/docs/solid-js/head/guides/core-concepts/reactivity)
  - [StreamingNew](https://unhead.unjs.io/docs/solid-js/head/guides/core-concepts/streaming)
- Build Plugins
  - [Overview](https://unhead.unjs.io/docs/solid-js/head/guides/build-plugins/overview)
  - [Tree-Shaking](https://unhead.unjs.io/docs/solid-js/head/guides/build-plugins/tree-shaking)
  - [useSeoMeta Transform](https://unhead.unjs.io/docs/solid-js/head/guides/build-plugins/seo-meta-transform)
  - [Minify Transform](https://unhead.unjs.io/docs/solid-js/head/guides/build-plugins/minify-transform)
  - [Devtools](https://unhead.unjs.io/docs/solid-js/head/guides/build-plugins/devtools)
- Plugins
  - [Template Params](https://unhead.unjs.io/docs/solid-js/head/guides/plugins/template-params)
  - [Alias Sorting](https://unhead.unjs.io/docs/solid-js/head/guides/plugins/alias-sorting)
  - [Canonical Plugin](https://unhead.unjs.io/docs/solid-js/head/guides/plugins/canonical)
  - [Infer SEO Meta](https://unhead.unjs.io/docs/solid-js/head/guides/plugins/infer-seo-meta-tags)
  - [Minify](https://unhead.unjs.io/docs/solid-js/head/guides/plugins/minify)
  - [Validate](https://unhead.unjs.io/docs/solid-js/head/guides/plugins/validate)

Core Concepts

# Reactivity in Solid.js

[Copy for LLMs](https://raw.githubusercontent.com/unjs/unhead/refs/heads/main/docs/0.solid-js/head/guides/1.core-concepts/0.reactivity.md)

Last updated Apr 5, 2026 by [Harlan Wilton](https://github.com/harlan-zw) in [docs: documentation content audit and formatting improvements (#718)](https://github.com/unjs/unhead/pull/718).

On this page

- [Introduction](#introduction)
- [How Does Unhead Work in Solid.js?](#how-does-unhead-work-in-solidjs)
- [How Do I Set Up UnheadContext?](#how-do-i-set-up-unheadcontext)
- [How Do I Use Signals with useHead()?](#how-do-i-use-signals-with-usehead)
- [How Do I Update Head Tags with Async Data?](#how-do-i-update-head-tags-with-async-data)
- [How Do I Manage Multiple Meta Tags Together?](#how-do-i-manage-multiple-meta-tags-together)
- [How Do I Create Reusable Head Components?](#how-do-i-create-reusable-head-components)
- [How Do I Conditionally Render Head Tags?](#how-do-i-conditionally-render-head-tags)
- [How Does Unhead Work Under the Hood?](#how-does-unhead-work-under-the-hood)
- [What Are the Best Practices?](#what-are-the-best-practices)

**Quick Answer:** In Solid, use signals with `useHead()` inside `createEffect()`. Pass getter functions for reactive values. Head tags update automatically with signal changes.

## [Introduction](#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?](#how-does-unhead-work-in-solidjs)

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?](#how-do-i-set-up-unheadcontext)

Unhead uses Solid.js's Context API to provide head management throughout your component tree:

```
import { createHead, UnheadContext } from '@unhead/solid-js/client'
import { render } from 'solid-js/web'
import App from './App'

const head = createHead()

render(() => (
  <UnheadContext.Provider value={head}>
    <App />
  </UnheadContext.Provider>
), 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()?](#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:

```
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 (
    <button onClick={() => setTitle('Updated Title')}>
      Update Title
    </button>
  )
}
```

### [Direct Signal Integration](#direct-signal-integration)

You can also pass signals directly to `useHead()`:

```
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 (
    <>
      <button onClick={() => setTitle('Updated Title')}>Update Title</button>
      <button onClick={() => setDescription('New description')}>Update Description</button>
    </>
  )
}
```

## [How Do I Update Head Tags with Async Data?](#how-do-i-update-head-tags-with-async-data)

It's common to update head tags based on asynchronous data:

```
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?](#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:

```
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?](#how-do-i-create-reusable-head-components)

Solid.js's composable nature makes it easy to create reusable head components:

```
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 (
    <div>
      <SEOHead
        title="Home Page"
        description="Welcome to our website"
      />
      {/* Page content */}
    </div>
  )
}
```

## [How Do I Conditionally Render Head Tags?](#how-do-i-conditionally-render-head-tags)

You can leverage Solid.js's control flow primitives to conditionally render head tags:

```
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 (
    <div>
      <Show when={isLoggedIn()} fallback={<button onClick={login}>Login</button>}>
        <h1>
          Welcome,
          {user().name}
          !
        </h1>
      </Show>
    </div>
  )
}
```

## [How Does Unhead Work Under the Hood?](#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?](#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:

```
function ProductPage(props) {
  return (
    <>
      <GlobalHead />
      <ProductHead id={props.id} />
      <ProductSchema id={props.id} />
      {/* 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.

[Edit this page](https://github.com/unjs/unhead/edit/main/docs/0.solid-js/head/guides/1.core-concepts/0.reactivity.md)

[Markdown For LLMs](https://raw.githubusercontent.com/unjs/unhead/refs/heads/main/docs/0.solid-js/head/guides/1.core-concepts/0.reactivity.md)

Did this page help you?

[Upgrade Guide Learn how to migrate between Unhead versions for Solid.js users.](https://unhead.unjs.io/docs/solid-js/head/guides/get-started/migration) [Streaming Stream head tags as Suspense boundaries resolve during SolidJS SSR](https://unhead.unjs.io/docs/solid-js/head/guides/core-concepts/streaming)

On this page

- [Introduction](#introduction)
- [How Does Unhead Work in Solid.js?](#how-does-unhead-work-in-solidjs)
- [How Do I Set Up UnheadContext?](#how-do-i-set-up-unheadcontext)
- [How Do I Use Signals with useHead()?](#how-do-i-use-signals-with-usehead)
- [How Do I Update Head Tags with Async Data?](#how-do-i-update-head-tags-with-async-data)
- [How Do I Manage Multiple Meta Tags Together?](#how-do-i-manage-multiple-meta-tags-together)
- [How Do I Create Reusable Head Components?](#how-do-i-create-reusable-head-components)
- [How Do I Conditionally Render Head Tags?](#how-do-i-conditionally-render-head-tags)
- [How Does Unhead Work Under the Hood?](#how-does-unhead-work-under-the-hood)
- [What Are the Best Practices?](#what-are-the-best-practices)

[GitHub](https://github.com/unjs/unhead) [ Discord](https://discord.com/invite/275MBUBvgP)

[ /llms.txt](https://unhead.unjs.io/llms.txt)

[Part of the UnJS ecosystem](https://unjs.io/)

### Head Management

- [Getting Started](https://unhead.unjs.io/docs/solid-js/head/guides/get-started/overview)
- [useHead](https://unhead.unjs.io/docs/solid-js/head/api/composables/use-head)
- [useSeoMeta](https://unhead.unjs.io/docs/solid-js/head/api/composables/use-seo-meta)
- [useHeadSafe](https://unhead.unjs.io/docs/solid-js/head/api/composables/use-head-safe)
- [useScript](https://unhead.unjs.io/docs/solid-js/head/api/composables/use-script)

### Schema.org

- [Getting Started](https://unhead.unjs.io/docs/solid-js/schema-org/guides/get-started/overview)
- [useSchemaOrg](https://unhead.unjs.io/docs/solid-js/schema-org/api/composables/use-schema-org)
- [Nodes](https://unhead.unjs.io/docs/solid-js/schema-org/guides/core-concepts/nodes)
- [Recipes](https://unhead.unjs.io/docs/solid-js/schema-org/guides/recipes/identity)

### Guides

- [Titles](https://unhead.unjs.io/docs/solid-js/head/guides/core-concepts/titles)
- [Streaming SSR](https://unhead.unjs.io/docs/solid-js/head/guides/core-concepts/streaming)
- [DOM Events](https://unhead.unjs.io/docs/solid-js/head/guides/core-concepts/dom-event-handling)
- [Plugins](https://unhead.unjs.io/docs/solid-js/head/guides/plugins/template-params)

### Tools

- [Meta Tag Generator](https://unhead.unjs.io/tools/meta-tag-generator)
- [OG Image Generator](https://unhead.unjs.io/tools/og-image-generator)
- [Schema.org Generator](https://unhead.unjs.io/tools/schema-generator)
- [Capo.js Analyzer](https://unhead.unjs.io/tools/capo-analyzer)

### Articles

- [What is Capo.js?](https://unhead.unjs.io/learn/guides/what-is-capo)

### Research

- [State of <head> in 2026](https://unhead.unjs.io/learn/research/state-of-head-2026)
- [Streaming Head Performance](https://unhead.unjs.io/learn/research/streaming-head-performance)
- [Capo.js Performance Research](https://unhead.unjs.io/learn/research/capo-performance-research)

Copyright © 2025-2026 Harlan Wilton - [MIT License](https://github.com/unjs/unhead/blob/main/license)