How to set the metadata dynamically to match state values in the app directory of Next.js?

In the app directory of Next.js 13, I saw in the official documentation that they've abandoned the old head method in favor of using metadata, and I thought it was only available on page or layout.

I want to change the title based on the state value, how can I do that?
The object in the metadata is outside the component, so I can't reference it.

import type { Metadata } from 'next';
 
export const metadata: Metadata = {
  title: 'Home',
  description: 'Welcome to Next.js',
};
 
export default function Page() {
  return '...';
}

If by state you mean something similar to useState, it's not possible. Because metadata is for Server Components only, whereas useState can only be used in Client Components. The doc says:

>The metadata object and generateMetadata function exports are only supported in Server Components.

For a normal page, you normally know what metadata to return, so the metadata object should be enough. If the page is dynamic, there is generateMetadata:

>Dynamic metadata depends on dynamic information, such as the current route parameters, external data, or metadata in parent segments, can be set by exporting a generateMetadata function that returns a Metadata object.

Find below an example of setting the title dynamically:

// app/products/[id]/page.tsx

export async function generateMetadata({ params, searchParams }) {
  // read route params
  const id = params.id;

  // fetch data
  const product = await fetch(`/api/products/${id}`).then((res) => res.json());

  // return a dynamic title
  return {
    title: product.title,
  };
}

export default function Page() {
  return '...';
}