entries:updated Hook

On this page

Lifecycle Position
Hook Signature
Usage Example
Use Cases

The entries:updated hook is called whenever the collection of head entries is modified, either by adding new entries, updating existing ones, or removing entries. This hook provides a way to react to changes in the application's head content.

Lifecycle Position

This is the first hook in the entry processing chain. It runs before entries:resolve.

Hook Signature

export interface Hook {
  'entries:updated': (ctx: Unhead<any>) => HookResult
}

Parameters

Name	Type	Description
`ctx`	`Unhead<any>`	The Unhead instance containing the updated entries

Returns

HookResult which is either void or Promise<void>

Usage Example

import { createHead } from '@unhead/solid-js'

const head = createHead({
  hooks: {
    'entries:updated': (head) => {
      // Log when entries are updated
      console.log('Head entries have been updated!')
      console.log(`Current entry count: ${head.entries.size}`)
    }
  }
})

Use Cases

Tracking Head Changes

You can use this hook to track and log changes to head entries throughout your application lifecycle:

import { defineHeadPlugin } from '@unhead/solid-js'

export const headChangeTrackingPlugin = defineHeadPlugin({
  hooks: {
    'entries:updated': (head) => {
      // Get current timestamp
      const timestamp = new Date().toISOString()

      // Log the updated state
      console.log(`[${timestamp}] Head entries updated:`, [...head.entries.values()].map(entry => ({
        id: entry._i,
        input: entry.input
      })))
    }
  }
})

Triggering Side Effects

The hook can be used to trigger side effects when head entries change:

import { defineHeadPlugin } from '@unhead/solid-js'

export const headChangeReactionPlugin = defineHeadPlugin({
  hooks: {
    'entries:updated': (head) => {
      // Check if title has changed
      const titleEntry = [...head.entries.values()].find(entry =>
        entry.input && typeof entry.input === 'object' && 'title' in entry.input
      )

      if (titleEntry) {
        // Perform side effect when title changes
        notifyTitleChange(titleEntry.input.title)
      }
    }
  }
})

function notifyTitleChange(title) {
  // Custom notification logic
  console.log(`Title changed to: ${title}`)
}