Dynamic Delcarative Header

Header.tsx

import { contentStackAtom } from "@/hooks/useHeader";
import { useAtomValue } from "jotai";

export default function Header() {
  const stack = useAtomValue(contentStackAtom).filter((node) => !!node.content);

  return (
    <header>
        {stack.at(-1)?.content ?? "App Title"}
    </header>
  );
}

useHeader.tsx

import { immerAtom } from "@/utils/immer";
import { useSetAtom } from "jotai";
import { useEffect, useId, type ReactNode } from "react";

export default function useHeader(content: ReactNode): void {
  const setContentStack = useSetAtom(contentStackAtom);
  const id = useId();

  useEffect(() => {
    setContentStack((x) => {
      const current = x.find((x) => x.id === id);
      if (!current) {
        x.push({ content, id });
        return;
      }

      current.content = content;
    });
  }, [id, setContentStack, content]);

  useEffect(() => {
    return () => {
      setContentStack((x) => x.filter((x) => x.id !== id));
    };
  }, [id, setContentStack]);
}

export const contentStackAtom = immerAtom<Array<{ content: ReactNode; id: string }>>([]);

A prototype for my idea to change app header's content dynamically in a declarative manner.

Put useHeader wherever you need to update Header contents. The last component to use it in a hierarchy "wins"