diff --git a/runtime_tests/deno-jsx/deno.precompile.json b/runtime_tests/deno-jsx/deno.precompile.json
index 315f3b88c..d46d3718c 100644
--- a/runtime_tests/deno-jsx/deno.precompile.json
+++ b/runtime_tests/deno-jsx/deno.precompile.json
@@ -4,7 +4,8 @@
     "jsxImportSource": "hono/jsx",
     "lib": [
       "deno.ns",
-      "dom"
+      "dom",
+      "dom.iterable"
     ]
   },
   "unstable": [
diff --git a/runtime_tests/deno-jsx/deno.react-jsx.json b/runtime_tests/deno-jsx/deno.react-jsx.json
index 9e0b018a9..92e4f7722 100644
--- a/runtime_tests/deno-jsx/deno.react-jsx.json
+++ b/runtime_tests/deno-jsx/deno.react-jsx.json
@@ -4,7 +4,8 @@
     "jsxImportSource": "hono/jsx",
     "lib": [
       "deno.ns",
-      "dom"
+      "dom",
+      "dom.iterable"
     ]
   },
   "unstable": [
diff --git a/src/helper/html/index.ts b/src/helper/html/index.ts
index 9b881fb54..e0871c0e4 100644
--- a/src/helper/html/index.ts
+++ b/src/helper/html/index.ts
@@ -3,8 +3,8 @@
  * html Helper for Hono.
  */
 
-import { escapeToBuffer, raw, stringBufferToString } from '../../utils/html'
-import type { HtmlEscaped, HtmlEscapedString, StringBuffer } from '../../utils/html'
+import { escapeToBuffer, raw, resolveCallbackSync, stringBufferToString } from '../../utils/html'
+import type { HtmlEscaped, HtmlEscapedString, StringBufferWithCallbacks } from '../../utils/html'
 
 export { raw }
 
@@ -12,7 +12,7 @@ export const html = (
   strings: TemplateStringsArray,
   ...values: unknown[]
 ): HtmlEscapedString | Promise<HtmlEscapedString> => {
-  const buffer: StringBuffer = ['']
+  const buffer: StringBufferWithCallbacks = [''] as StringBufferWithCallbacks
 
   for (let i = 0, len = strings.length - 1; i < len; i++) {
     buffer[0] += strings[i]
@@ -48,5 +48,9 @@ export const html = (
   }
   buffer[0] += strings[strings.length - 1]
 
-  return buffer.length === 1 ? raw(buffer[0]) : stringBufferToString(buffer)
+  return buffer.length === 1
+    ? 'callbacks' in buffer
+      ? raw(resolveCallbackSync(raw(buffer[0], buffer.callbacks)))
+      : raw(buffer[0])
+    : stringBufferToString(buffer, buffer.callbacks)
 }
diff --git a/src/jsx/base.ts b/src/jsx/base.ts
index c250a9123..f80784d59 100644
--- a/src/jsx/base.ts
+++ b/src/jsx/base.ts
@@ -1,13 +1,16 @@
 import { raw } from '../helper/html'
-import { escapeToBuffer, stringBufferToString } from '../utils/html'
-import type { HtmlEscaped, HtmlEscapedString, StringBuffer } from '../utils/html'
+import { escapeToBuffer, resolveCallbackSync, stringBufferToString } from '../utils/html'
+import type { HtmlEscaped, HtmlEscapedString, StringBufferWithCallbacks } from '../utils/html'
 import type { Context } from './context'
 import { globalContexts } from './context'
+import { DOM_RENDERER } from './constants'
 import type {
   JSX as HonoJSX,
   IntrinsicElements as IntrinsicElementsDefined,
 } from './intrinsic-elements'
 import { normalizeIntrinsicElementKey, styleObjectForEach } from './utils'
+import * as intrinsicElementTags from './intrinsic-element/components'
+import { domRenderers } from './intrinsic-element/common'
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type Props = Record<string, any>
@@ -74,7 +77,7 @@ const booleanAttributes = [
   'selected',
 ]
 
-const childrenToStringToBuffer = (children: Child[], buffer: StringBuffer): void => {
+const childrenToStringToBuffer = (children: Child[], buffer: StringBufferWithCallbacks): void => {
   for (let i = 0, len = children.length; i < len; i++) {
     const child = children[i]
     if (typeof child === 'string') {
@@ -131,7 +134,7 @@ export class JSXNode implements HtmlEscaped {
   }
 
   toString(): string | Promise<string> {
-    const buffer: StringBuffer = ['']
+    const buffer: StringBufferWithCallbacks = [''] as StringBufferWithCallbacks
     this.localContexts?.forEach(([context, value]) => {
       context.values.push(value)
     })
@@ -142,10 +145,14 @@ export class JSXNode implements HtmlEscaped {
         context.values.pop()
       })
     }
-    return buffer.length === 1 ? buffer[0] : stringBufferToString(buffer)
+    return buffer.length === 1
+      ? 'callbacks' in buffer
+        ? resolveCallbackSync(raw(buffer[0], buffer.callbacks)).toString()
+        : buffer[0]
+      : stringBufferToString(buffer, buffer.callbacks)
   }
 
-  toStringToBuffer(buffer: StringBuffer): void {
+  toStringToBuffer(buffer: StringBufferWithCallbacks): void {
     const tag = this.tag as string
     const props = this.props
     let { children } = this
@@ -214,7 +221,7 @@ export class JSXNode implements HtmlEscaped {
 }
 
 class JSXFunctionNode extends JSXNode {
-  toStringToBuffer(buffer: StringBuffer): void {
+  toStringToBuffer(buffer: StringBufferWithCallbacks): void {
     const { children } = this
 
     const res = (this.tag as Function).call(null, {
@@ -242,6 +249,10 @@ class JSXFunctionNode extends JSXNode {
       res.toStringToBuffer(buffer)
     } else if (typeof res === 'number' || (res as HtmlEscaped).isEscaped) {
       buffer[0] += res
+      if (res.callbacks) {
+        buffer.callbacks ||= []
+        buffer.callbacks.push(...res.callbacks)
+      }
     } else {
       escapeToBuffer(res, buffer)
     }
@@ -249,7 +260,7 @@ class JSXFunctionNode extends JSXNode {
 }
 
 export class JSXFragmentNode extends JSXNode {
-  toStringToBuffer(buffer: StringBuffer): void {
+  toStringToBuffer(buffer: StringBufferWithCallbacks): void {
     childrenToStringToBuffer(this.children, buffer)
   }
 }
@@ -272,13 +283,29 @@ export const jsx = (
   return node
 }
 
+let initDomRenderer = false
 export const jsxFn = (
   tag: string | Function,
   props: Props,
   children: (string | number | HtmlEscapedString)[]
 ): JSXNode => {
+  if (!initDomRenderer) {
+    for (const k in domRenderers) {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      ;(intrinsicElementTags[k as keyof typeof intrinsicElementTags] as any)[DOM_RENDERER] =
+        domRenderers[k]
+    }
+    initDomRenderer = true
+  }
+
   if (typeof tag === 'function') {
     return new JSXFunctionNode(tag, props, children)
+  } else if (intrinsicElementTags[tag as keyof typeof intrinsicElementTags]) {
+    return new JSXFunctionNode(
+      intrinsicElementTags[tag as keyof typeof intrinsicElementTags],
+      props,
+      children
+    )
   } else {
     return new JSXNode(tag, props, children)
   }
@@ -357,4 +384,4 @@ export const cloneElement = <T extends JSXNode | JSX.Element>(
   ) as T
 }
 
-export const reactAPICompatVersion = '18.0.0-hono-jsx'
+export const reactAPICompatVersion = '19.0.0-hono-jsx'
diff --git a/src/jsx/constants.ts b/src/jsx/constants.ts
index 1c5a37df7..7d1b0aae8 100644
--- a/src/jsx/constants.ts
+++ b/src/jsx/constants.ts
@@ -2,3 +2,4 @@ export const DOM_RENDERER = Symbol('RENDERER')
 export const DOM_ERROR_HANDLER = Symbol('ERROR_HANDLER')
 export const DOM_STASH = Symbol('STASH')
 export const DOM_INTERNAL_TAG = Symbol('INTERNAL')
+export const PERMALINK = Symbol('PERMALINK')
diff --git a/src/jsx/context.ts b/src/jsx/context.ts
index 22e46f75a..882beb797 100644
--- a/src/jsx/context.ts
+++ b/src/jsx/context.ts
@@ -5,7 +5,7 @@ import { DOM_RENDERER } from './constants'
 import { createContextProviderFunction } from './dom/context'
 import type { FC, PropsWithChildren } from './'
 
-export interface Context<T> {
+export interface Context<T> extends FC<PropsWithChildren<{ value: T }>> {
   values: T[]
   Provider: FC<PropsWithChildren<{ value: T }>>
 }
@@ -14,33 +14,31 @@ export const globalContexts: Context<unknown>[] = []
 
 export const createContext = <T>(defaultValue: T): Context<T> => {
   const values = [defaultValue]
-  const context: Context<T> = {
-    values,
-    Provider(props): HtmlEscapedString | Promise<HtmlEscapedString> {
-      values.push(props.value)
-      let string
-      try {
-        string = props.children
-          ? (Array.isArray(props.children)
-              ? new JSXFragmentNode('', {}, props.children)
-              : props.children
-            ).toString()
-          : ''
-      } finally {
-        values.pop()
-      }
-
-      if (string instanceof Promise) {
-        return string.then((resString) =>
-          raw(resString, (resString as HtmlEscapedString).callbacks)
-        )
-      } else {
-        return raw(string)
-      }
-    },
-  }
+  const context: Context<T> = ((props): HtmlEscapedString | Promise<HtmlEscapedString> => {
+    values.push(props.value)
+    let string
+    try {
+      string = props.children
+        ? (Array.isArray(props.children)
+            ? new JSXFragmentNode('', {}, props.children)
+            : props.children
+          ).toString()
+        : ''
+    } finally {
+      values.pop()
+    }
+
+    if (string instanceof Promise) {
+      return string.then((resString) => raw(resString, (resString as HtmlEscapedString).callbacks))
+    } else {
+      return raw(string)
+    }
+  }) as Context<T>
+  context.values = values
+  context.Provider = context
+
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  ;(context.Provider as any)[DOM_RENDERER] = createContextProviderFunction(values)
+  ;(context as any)[DOM_RENDERER] = createContextProviderFunction(values)
 
   globalContexts.push(context as Context<unknown>)
 
diff --git a/src/jsx/dom/components.test.tsx b/src/jsx/dom/components.test.tsx
index 2895a12c7..282e4a0f3 100644
--- a/src/jsx/dom/components.test.tsx
+++ b/src/jsx/dom/components.test.tsx
@@ -60,6 +60,40 @@ function runner(
         expect(root.innerHTML).toBe('<p>1</p>')
       })
 
+      it('with use() update', async () => {
+        const counterMap: Record<number, Promise<number>> = {}
+        const getCounter = (count: number) => (counterMap[count] ||= Promise.resolve(count + 1))
+        const Content = ({ count }: { count: number }) => {
+          const num = use(getCounter(count))
+          return (
+            <>
+              <div>{num}</div>
+            </>
+          )
+        }
+        const Component = () => {
+          const [count, setCount] = useState(0)
+          return (
+            <Suspense fallback={<div>Loading...</div>}>
+              <Content count={count} />
+              <button onClick={() => setCount(count + 1)}>Increment</button>
+            </Suspense>
+          )
+        }
+        const App = <Component />
+        render(App, root)
+        expect(root.innerHTML).toBe('<div>Loading...</div>')
+        await Promise.resolve()
+        await Promise.resolve()
+        expect(root.innerHTML).toBe('<div>1</div><button>Increment</button>')
+        root.querySelector('button')?.click()
+        await Promise.resolve()
+        expect(root.innerHTML).toBe('<div>Loading...</div>')
+        await Promise.resolve()
+        await Promise.resolve()
+        expect(root.innerHTML).toBe('<div>2</div><button>Increment</button>')
+      })
+
       it('with use() nested', async () => {
         let resolve: (value: number) => void = () => {}
         const promise = new Promise<number>((_resolve) => (resolve = _resolve))
@@ -131,6 +165,81 @@ function runner(
         await Promise.resolve()
         expect(root.innerHTML).toBe('<div><button>Hide</button><p>2</p></div>')
       })
+
+      it('Suspense at child', async () => {
+        let resolve: (value: number) => void = () => {}
+        const promise = new Promise<number>((_resolve) => (resolve = _resolve))
+        const Content = () => {
+          const num = use(promise)
+          return <p>{num}</p>
+        }
+
+        const Component = () => {
+          return (
+            <Suspense fallback={<div>Loading...</div>}>
+              <Content />
+            </Suspense>
+          )
+        }
+        const App = () => {
+          const [show, setShow] = useState(false)
+          return (
+            <div>
+              {show && <Component />}
+              <button onClick={() => setShow(true)}>Show</button>
+            </div>
+          )
+        }
+        render(<App />, root)
+        expect(root.innerHTML).toBe('<div><button>Show</button></div>')
+        root.querySelector('button')?.click()
+        await Promise.resolve()
+        expect(root.innerHTML).toBe('<div><div>Loading...</div><button>Show</button></div>')
+        resolve(2)
+        await Promise.resolve()
+        await Promise.resolve()
+        expect(root.innerHTML).toBe('<div><p>2</p><button>Show</button></div>')
+      })
+
+      it('Suspense at child counter', async () => {
+        const promiseMap: Record<number, Promise<number>> = {}
+        const Counter = () => {
+          const [count, setCount] = useState(0)
+          const promise = (promiseMap[count] ||= Promise.resolve(count))
+          const value = use(promise)
+          return (
+            <>
+              <p>{value}</p>
+              <button onClick={() => setCount(count + 1)}>Increment</button>
+            </>
+          )
+        }
+        const Component = () => {
+          return (
+            <Suspense fallback={<div>Loading...</div>}>
+              <Counter />
+            </Suspense>
+          )
+        }
+        const App = () => {
+          return (
+            <div>
+              <Component />
+            </div>
+          )
+        }
+        render(<App />, root)
+        expect(root.innerHTML).toBe('<div><div>Loading...</div></div>')
+        await Promise.resolve()
+        await Promise.resolve()
+        expect(root.innerHTML).toBe('<div><p>0</p><button>Increment</button></div>')
+        root.querySelector('button')?.click()
+        await Promise.resolve()
+        expect(root.innerHTML).toBe('<div><div>Loading...</div></div>')
+        await Promise.resolve()
+        await Promise.resolve()
+        expect(root.innerHTML).toBe('<div><p>1</p><button>Increment</button></div>')
+      })
     })
 
     describe('ErrorBoundary', () => {
diff --git a/src/jsx/dom/context.test.tsx b/src/jsx/dom/context.test.tsx
index c49d6b087..c0a9d3239 100644
--- a/src/jsx/dom/context.test.tsx
+++ b/src/jsx/dom/context.test.tsx
@@ -54,6 +54,24 @@ function runner(
         expect(root.innerHTML).toBe('<p>1</p>')
       })
 
+      it('<Context> as a provider ', async () => {
+        const Context = createContext(0)
+        const Content = () => {
+          const num = useContext(Context)
+          return <p>{num}</p>
+        }
+        const Component = () => {
+          return (
+            <Context value={1}>
+              <Content />
+            </Context>
+          )
+        }
+        const App = <Component />
+        render(App, root)
+        expect(root.innerHTML).toBe('<p>1</p>')
+      })
+
       it('simple context with state', async () => {
         const Context = createContext(0)
         const Content = () => {
diff --git a/src/jsx/dom/context.ts b/src/jsx/dom/context.ts
index d39f52f8c..af9bd71d0 100644
--- a/src/jsx/dom/context.ts
+++ b/src/jsx/dom/context.ts
@@ -2,11 +2,11 @@ import type { Child } from '../base'
 import { DOM_ERROR_HANDLER } from '../constants'
 import type { Context } from '../context'
 import { globalContexts } from '../context'
-import { Fragment } from './jsx-runtime'
-import { setInternalTagFlag } from './utils'
+import { newJSXNode, setInternalTagFlag } from './utils'
 
-export const createContextProviderFunction = <T>(values: T[]): Function =>
-  setInternalTagFlag(({ value, children }: { value: T; children: Child[] }) => {
+export const createContextProviderFunction =
+  <T>(values: T[]): Function =>
+  ({ value, children }: { value: T; children: Child[] }) => {
     if (!children) {
       return undefined
     }
@@ -33,22 +33,20 @@ export const createContextProviderFunction = <T>(values: T[]): Function =>
       }),
       props: {},
     })
-    const res = Fragment(props)
+    const res = newJSXNode({ tag: '', props })
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     ;(res as any)[DOM_ERROR_HANDLER] = (err: unknown) => {
       values.pop()
       throw err
     }
     return res
-  })
+  }
 
 export const createContext = <T>(defaultValue: T): Context<T> => {
   const values = [defaultValue]
-  const context = {
-    values,
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    Provider: createContextProviderFunction(values) as any,
-  }
-  globalContexts.push(context)
+  const context: Context<T> = createContextProviderFunction(values) as Context<T>
+  context.values = values
+  context.Provider = context
+  globalContexts.push(context as Context<unknown>)
   return context
 }
diff --git a/src/jsx/dom/hooks/index.test.tsx b/src/jsx/dom/hooks/index.test.tsx
new file mode 100644
index 000000000..aeeb9996c
--- /dev/null
+++ b/src/jsx/dom/hooks/index.test.tsx
@@ -0,0 +1,173 @@
+/** @jsxImportSource ../../ */
+import { JSDOM } from 'jsdom'
+import { render, useState } from '..'
+import { useActionState, useFormStatus, useOptimistic } from '.'
+
+describe('Hooks', () => {
+  beforeAll(() => {
+    global.requestAnimationFrame = (cb) => setTimeout(cb)
+  })
+
+  let dom: JSDOM
+  let root: HTMLElement
+  beforeEach(() => {
+    dom = new JSDOM('<html><body><div id="root"></div></body></html>', {
+      runScripts: 'dangerously',
+    })
+    global.document = dom.window.document
+    global.HTMLElement = dom.window.HTMLElement
+    global.SVGElement = dom.window.SVGElement
+    global.Text = dom.window.Text
+    global.FormData = dom.window.FormData
+    root = document.getElementById('root') as HTMLElement
+  })
+
+  describe('useActionState', () => {
+    it('should return initial state', () => {
+      const [state] = useActionState(() => {}, 'initial')
+      expect(state).toBe('initial')
+    })
+
+    it('should return updated state', async () => {
+      const action = vi.fn().mockReturnValue('updated')
+
+      const App = () => {
+        const [state, formAction] = useActionState(action, 'initial')
+        return (
+          <>
+            <div>{state}</div>
+            <form action={formAction}>
+              <input type='text' name='name' value='updated' />
+              <button>Submit</button>
+            </form>
+          </>
+        )
+      }
+
+      render(<App />, root)
+      expect(root.innerHTML).toBe(
+        '<div>initial</div><form><input type="text" name="name" value="updated"><button>Submit</button></form>'
+      )
+      root.querySelector('button')?.click()
+      await Promise.resolve()
+      await Promise.resolve()
+      expect(root.innerHTML).toBe(
+        '<div>updated</div><form><input type="text" name="name" value="updated"><button>Submit</button></form>'
+      )
+
+      expect(action).toHaveBeenCalledOnce()
+      const [initialState, formData] = action.mock.calls[0]
+      expect(initialState).toBe('initial')
+      expect(formData).toBeInstanceOf(FormData)
+      expect(formData.get('name')).toBe('updated')
+    })
+  })
+
+  describe('useFormStatus', () => {
+    it('should return initial state', () => {
+      const status = useFormStatus()
+      expect(status).toEqual({
+        pending: false,
+        data: null,
+        method: null,
+        action: null,
+      })
+    })
+
+    it('should return updated state', async () => {
+      let formResolve: () => void = () => {}
+      const formPromise = new Promise<void>((r) => (formResolve = r))
+      let status: ReturnType<typeof useFormStatus> | undefined
+      const Status = () => {
+        status = useFormStatus()
+        return null
+      }
+      const App = () => {
+        const [, setCount] = useState(0)
+        return (
+          <>
+            <form
+              action={() => {
+                setCount((count) => count + 1)
+                return formPromise
+              }}
+            >
+              <Status />
+              <input type='text' name='name' value='updated' />
+              <button>Submit</button>
+            </form>
+          </>
+        )
+      }
+
+      render(<App />, root)
+      expect(root.innerHTML).toBe(
+        '<form><input type="text" name="name" value="updated"><button>Submit</button></form>'
+      )
+      root.querySelector('button')?.click()
+      await Promise.resolve()
+      await Promise.resolve()
+      await Promise.resolve()
+      await Promise.resolve()
+      expect(status).toEqual({
+        pending: true,
+        data: expect.any(FormData),
+        method: 'post',
+        action: expect.any(Function),
+      })
+      formResolve?.()
+      await Promise.resolve()
+      await Promise.resolve()
+      expect(status).toEqual({
+        pending: false,
+        data: null,
+        method: null,
+        action: null,
+      })
+    })
+  })
+
+  describe('useOptimistic', () => {
+    it('should return updated state', async () => {
+      let formResolve: () => void = () => {}
+      const formPromise = new Promise<void>((r) => (formResolve = r))
+      const App = () => {
+        const [count, setCount] = useState(0)
+        const [optimisticCount, setOptimisticCount] = useOptimistic(count, (c, n: number) => n)
+        return (
+          <>
+            <form
+              action={async () => {
+                setOptimisticCount(count + 1)
+                await formPromise
+                setCount((count) => count + 2)
+              }}
+            >
+              <div>{optimisticCount}</div>
+              <input type='text' name='name' value='updated' />
+              <button>Submit</button>
+            </form>
+          </>
+        )
+      }
+
+      render(<App />, root)
+      expect(root.innerHTML).toBe(
+        '<form><div>0</div><input type="text" name="name" value="updated"><button>Submit</button></form>'
+      )
+      root.querySelector('button')?.click()
+      await Promise.resolve()
+      expect(root.innerHTML).toBe(
+        '<form><div>1</div><input type="text" name="name" value="updated"><button>Submit</button></form>'
+      )
+      formResolve?.()
+      await Promise.resolve()
+      await Promise.resolve()
+      await Promise.resolve()
+      await Promise.resolve()
+      expect(root.innerHTML).toBe(
+        '<form><div>2</div><input type="text" name="name" value="updated"><button>Submit</button></form>'
+      )
+    })
+  })
+})
diff --git a/src/jsx/dom/hooks/index.ts b/src/jsx/dom/hooks/index.ts
new file mode 100644
index 000000000..d0102a234
--- /dev/null
+++ b/src/jsx/dom/hooks/index.ts
@@ -0,0 +1,90 @@
+/**
+ * Provide hooks used only in jsx/dom
+ */
+
+import { useContext } from '../../context'
+import { createContext } from '../context'
+import { useCallback, useState } from '../../hooks'
+import { PERMALINK } from '../../constants'
+
+type FormStatus =
+  | {
+      pending: false
+      data: null
+      method: null
+      action: null
+    }
+  | {
+      pending: true
+      data: FormData
+      method: 'get' | 'post'
+      action: string | ((formData: FormData) => void | Promise<void>)
+    }
+export const FormContext = createContext<FormStatus>({
+  pending: false,
+  data: null,
+  method: null,
+  action: null,
+})
+
+const actions: Set<Promise<unknown>> = new Set()
+export const registerAction = (action: Promise<unknown>) => {
+  actions.add(action)
+  action.finally(() => actions.delete(action))
+}
+
+/**
+ * This hook returns the current form status
+ * @returns FormStatus
+ */
+export const useFormStatus = (): FormStatus => {
+  return useContext(FormContext)
+}
+
+/**
+ * This hook returns the current state and a function to update the state optimistically
+ * The current state is updated optimistically and then reverted to the original state when all actions are resolved
+ * @param state
+ * @param updateState
+ * @returns [T, (action: N) => void]
+ */
+export const useOptimistic = <T, N>(
+  state: T,
+  updateState: (currentState: T, action: N) => T
+): [T, (action: N) => void] => {
+  const [optimisticState, setOptimisticState] = useState(state)
+  if (actions.size > 0) {
+    Promise.all(actions).finally(() => {
+      setOptimisticState(state)
+    })
+  } else {
+    setOptimisticState(state)
+  }
+
+  const cb = useCallback((newData: N) => {
+    setOptimisticState((currentState) => updateState(currentState, newData))
+  }, [])
+
+  return [optimisticState, cb]
+}
+
+/**
+ * This hook returns the current state and a function to update the state by form action
+ * @param fn
+ * @param initialState
+ * @param permalink
+ * @returns [T, (data: FormData) => void]
+ */
+export const useActionState = <T>(
+  fn: Function,
+  initialState: T,
+  permalink?: string
+): [T, Function] => {
+  const [state, setState] = useState(initialState)
+  const actionState = async (data: FormData) => {
+    setState(await fn(state, data))
+  }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ;(actionState as any)[PERMALINK] = permalink
+  return [state, actionState]
+}
diff --git a/src/jsx/dom/index.test.tsx b/src/jsx/dom/index.test.tsx
index 5ca83930c..48c77cda3 100644
--- a/src/jsx/dom/index.test.tsx
+++ b/src/jsx/dom/index.test.tsx
@@ -240,6 +240,28 @@ describe('DOM', () => {
       expect(root.innerHTML).toBe('<button>remove</button>')
       expect(ref).toHaveBeenLastCalledWith(null)
     })
+
+    it('ref cleanup function', async () => {
+      const cleanup = vi.fn()
+      const ref = vi.fn().mockReturnValue(cleanup)
+      const App = () => {
+        const [show, setShow] = useState(true)
+        return (
+          <>
+            {show && <div ref={ref} />}
+            <button onClick={() => setShow(false)}>remove</button>
+          </>
+        )
+      }
+      render(<App />, root)
+      expect(root.innerHTML).toBe('<div></div><button>remove</button>')
+      expect(ref).toHaveBeenLastCalledWith(expect.any(dom.window.HTMLDivElement))
+      root.querySelector('button')?.click()
+      await Promise.resolve()
+      expect(root.innerHTML).toBe('<button>remove</button>')
+      expect(ref).toBeCalledTimes(1)
+      expect(cleanup).toBeCalledTimes(1)
+    })
   })
 
   describe('defaultProps', () => {
@@ -1139,7 +1161,7 @@ describe('DOM', () => {
     expect(createElementSpy).not.toHaveBeenCalled()
   })
 
-  it('setState for unnamed function', async () => {
+  it('useState for unnamed function', async () => {
     const Input = ({ label, onInput }: { label: string; onInput: (value: string) => void }) => {
       return (
         <div>
@@ -1181,6 +1203,40 @@ describe('DOM', () => {
     )
   })
 
+  it('useState for grand child function', async () => {
+    const GrandChild = () => {
+      const [count, setCount] = useState(0)
+      return (
+        <>
+          {count === 0 ? <p>Zero</p> : <span>Not Zero</span>}
+          <button onClick={() => setCount(count + 1)}>+</button>
+        </>
+      )
+    }
+    const Child = () => {
+      return <GrandChild />
+    }
+    const App = () => {
+      const [show, setShow] = useState(false)
+      return (
+        <div>
+          {show && <Child />}
+          <button onClick={() => setShow(!show)}>toggle</button>
+        </div>
+      )
+    }
+    render(<App />, root)
+    expect(root.innerHTML).toBe('<div><button>toggle</button></div>')
+    root.querySelector('button')?.click()
+    await Promise.resolve()
+    expect(root.innerHTML).toBe('<div><p>Zero</p><button>+</button><button>toggle</button></div>')
+    root.querySelector('button')?.click()
+    await Promise.resolve()
+    expect(root.innerHTML).toBe(
+      '<div><span>Not Zero</span><button>+</button><button>toggle</button></div>'
+    )
+  })
+
   describe('className', () => {
     it('should convert to class attribute for intrinsic elements', () => {
       const App = <h1 className='h1'>Hello</h1>
@@ -1953,9 +2009,8 @@ describe('DOM', () => {
         )
       }
       render(<App />, root)
-      expect(root.innerHTML).toBe(
-        '<title>Document Title</title><svg><title>SVG Title</title></svg>'
-      )
+      expect(document.head.innerHTML).toBe('<title>Document Title</title>')
+      expect(root.innerHTML).toBe('<svg><title>SVG Title</title></svg>')
       expect(document.querySelector('title')).toBeInstanceOf(dom.window.HTMLTitleElement)
       expect(document.querySelector('svg title')).toBeInstanceOf(dom.window.SVGTitleElement)
     })
@@ -2182,6 +2237,9 @@ describe('default export', () => {
     'useDeferredValue',
     'startViewTransition',
     'useViewTransition',
+    'useActionState',
+    'useFormStatus',
+    'useOptimistic',
     'useMemo',
     'useLayoutEffect',
     'Suspense',
diff --git a/src/jsx/dom/index.ts b/src/jsx/dom/index.ts
index fee471f35..a6ea34903 100644
--- a/src/jsx/dom/index.ts
+++ b/src/jsx/dom/index.ts
@@ -29,6 +29,7 @@ import {
   useTransition,
   useViewTransition,
 } from '../hooks'
+import { useActionState, useFormStatus, useOptimistic } from './hooks'
 import { ErrorBoundary, Suspense } from './components'
 import { createContext } from './context'
 import { Fragment, jsx } from './jsx-runtime'
@@ -94,6 +95,9 @@ export {
   forwardRef,
   useImperativeHandle,
   useSyncExternalStore,
+  useFormStatus,
+  useActionState,
+  useOptimistic,
   Suspense,
   ErrorBoundary,
   createContext,
@@ -132,6 +136,9 @@ export default {
   forwardRef,
   useImperativeHandle,
   useSyncExternalStore,
+  useFormStatus,
+  useActionState,
+  useOptimistic,
   Suspense,
   ErrorBoundary,
   createContext,
diff --git a/src/jsx/dom/intrinsic-element/components.test.tsx b/src/jsx/dom/intrinsic-element/components.test.tsx
new file mode 100644
index 000000000..a9e29c2a7
--- /dev/null
+++ b/src/jsx/dom/intrinsic-element/components.test.tsx
@@ -0,0 +1,1020 @@
+/** @jsxImportSource ../../ */
+import { JSDOM, ResourceLoader } from 'jsdom'
+import { useState } from '../../hooks'
+import { Suspense, render } from '..'
+import { clearCache, composeRef } from './components'
+
+describe('intrinsic element', () => {
+  let CustomResourceLoader: typeof ResourceLoader
+  beforeAll(() => {
+    global.requestAnimationFrame = (cb) => setTimeout(cb)
+
+    CustomResourceLoader = class CustomResourceLoader extends ResourceLoader {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      fetch(url: string) {
+        return url.includes('invalid')
+          ? Promise.reject('Invalid URL')
+          : // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            (Promise.resolve(Buffer.from('')) as any)
+      }
+    }
+  })
+
+  let dom: JSDOM
+  let root: HTMLElement
+  beforeEach(() => {
+    clearCache()
+
+    dom = new JSDOM('<html><head></head><body><div id="root"></div></body></html>', {
+      runScripts: 'dangerously',
+      resources: new CustomResourceLoader(),
+    })
+    global.document = dom.window.document
+    global.HTMLElement = dom.window.HTMLElement
+    global.SVGElement = dom.window.SVGElement
+    global.Text = dom.window.Text
+    global.FormData = dom.window.FormData
+    global.CustomEvent = dom.window.CustomEvent
+    root = document.getElementById('root') as HTMLElement
+  })
+
+  describe('document metadata', () => {
+    describe('title element', () => {
+      it('should be inserted into head', () => {
+        const App = () => {
+          return (
+            <div>
+              <title>Document Title</title>
+              Content
+            </div>
+          )
+        }
+        render(<App />, root)
+        expect(document.head.innerHTML).toBe('<title>Document Title</title>')
+        expect(root.innerHTML).toBe('<div>Content</div>')
+      })
+
+      it('should be updated', async () => {
+        const App = () => {
+          const [count, setCount] = useState(0)
+          return (
+            <div>
+              <title>Document Title {count}</title>
+              <button onClick={() => setCount(count + 1)}>+</button>
+            </div>
+          )
+        }
+        render(<App />, root)
+        expect(document.head.innerHTML).toBe('<title>Document Title 0</title>')
+        expect(root.innerHTML).toBe('<div><button>+</button></div>')
+        root.querySelector('button')?.click()
+        await Promise.resolve()
+        expect(document.head.innerHTML).toBe('<title>Document Title 1</title>')
+      })
+
+      it('should be removed when unmounted', async () => {
+        const App = () => {
+          const [count, setCount] = useState(0)
+          return (
+            <div>
+              {count === 1 && <title>Document Title {count}</title>}
+              <div>{count}</div>
+              <button onClick={() => setCount(count + 1)}>+</button>
+            </div>
+          )
+        }
+        render(<App />, root)
+        expect(document.head.innerHTML).toBe('')
+        expect(root.innerHTML).toBe('<div><div>0</div><button>+</button></div>')
+        root.querySelector('button')?.click()
+        await Promise.resolve()
+        expect(document.head.innerHTML).toBe('<title>Document Title 1</title>')
+        expect(root.innerHTML).toBe('<div><div>1</div><button>+</button></div>')
+        root.querySelector('button')?.click()
+        await Promise.resolve()
+        expect(document.head.innerHTML).toBe('')
+        expect(root.innerHTML).toBe('<div><div>2</div><button>+</button></div>')
+      })
+
+      it('should be inserted bottom of head if existing element is removed', async () => {
+        document.head.innerHTML = '<title>Existing Title</title>'
+
+        const App = () => {
+          const [count, setCount] = useState(0)
+          return (
+            <div>
+              {count === 1 && <title>Document Title {count}</title>}
+              <div>{count}</div>
+              <button onClick={() => setCount(count + 1)}>+</button>
+            </div>
+          )
+        }
+        render(<App />, root)
+        expect(document.head.innerHTML).toBe('<title>Existing Title</title>')
+        expect(root.innerHTML).toBe('<div><div>0</div><button>+</button></div>')
+        root.querySelector('button')?.click()
+        document.head.querySelector('title')?.remove()
+        await Promise.resolve()
+        expect(document.head.innerHTML).toBe('<title>Document Title 1</title>')
+        expect(root.innerHTML).toBe('<div><div>1</div><button>+</button></div>')
+      })
+
+      it('should be inserted before existing title element', async () => {
+        document.head.innerHTML = '<title>Existing Title</title>'
+
+        const App = () => {
+          const [count, setCount] = useState(0)
+          return (
+            <div>
+              {count === 1 && <title>Document Title {count}</title>}
+              <div>{count}</div>
+              <button onClick={() => setCount(count + 1)}>+</button>
+            </div>
+          )
+        }
+        render(<App />, root)
+        expect(document.head.innerHTML).toBe('<title>Existing Title</title>')
+        expect(root.innerHTML).toBe('<div><div>0</div><button>+</button></div>')
+        root.querySelector('button')?.click()
+        await Promise.resolve()
+        expect(document.head.innerHTML).toBe(
+          '<title>Document Title 1</title><title>Existing Title</title>'
+        )
+        expect(root.innerHTML).toBe('<div><div>1</div><button>+</button></div>')
+        root.querySelector('button')?.click()
+        await Promise.resolve()
+        expect(document.head.innerHTML).toBe('<title>Existing Title</title>')
+        expect(root.innerHTML).toBe('<div><div>2</div><button>+</button></div>')
+      })
+    })
+
+    describe('link element', () => {
+      it('should be inserted into head', () => {
+        const App = () => {
+          return (
+            <div>
+              <link rel='stylesheet' href='style.css' precedence='default' />
+              Content
+            </div>
+          )
+        }
+        render(<App />, root)
+        expect(document.head.innerHTML).toBe(
+          '<link href="style.css" rel="stylesheet" data-precedence="default">'
+        )
+        expect(root.innerHTML).toBe('<div>Content</div>')
+      })
+
+      it('should be updated', async () => {
+        const App = () => {
+          const [count, setCount] = useState(0)
+          return (
+            <div>
+              <link rel='stylesheet' href={`style${count}.css`} precedence='default' />
+              <button onClick={() => setCount(count + 1)}>+</button>
+            </div>
+          )
+        }
+        render(<App />, root)
+        expect(document.head.innerHTML).toBe(
+          '<link href="style0.css" rel="stylesheet" data-precedence="default">'
+        )
+        expect(root.innerHTML).toBe('<div><button>+</button></div>')
+        root.querySelector('button')?.click()
+        await Promise.resolve()
+        expect(document.head.innerHTML).toBe(
+          '<link href="style1.css" rel="stylesheet" data-precedence="default">'
+        )
+      })
+
+      it('should not do special behavior if disabled is present', () => {
+        const App = () => {
+          return (
+            <div>
+              <link rel='stylesheet' href={'style.css'} precedence='default' disabled={true} />
+            </div>
+          )
+        }
+        render(<App />, root)
+        expect(document.head.innerHTML).toBe('')
+        expect(root.innerHTML).toBe(
+          '<div><link rel="stylesheet" href="style.css" precedence="default" disabled=""></div>'
+        )
+      })
+
+      it('should be ordered by precedence attribute', () => {
+        const App = () => {
+          return (
+            <div>
+              <link rel='stylesheet' href='style-a.css' precedence='default' />
+              <link rel='stylesheet' href='style-b.css' precedence='high' />
+              <link rel='stylesheet' href='style-c.css' precedence='default' />
+              Content
+            </div>
+          )
+        }
+        render(<App />, root)
+        expect(document.head.innerHTML).toBe(
+          '<link href="style-a.css" rel="stylesheet" data-precedence="default"><link href="style-c.css" rel="stylesheet" data-precedence="default"><link href="style-b.css" rel="stylesheet" data-precedence="high">'
+        )
+        expect(root.innerHTML).toBe('<div>Content</div>')
+      })
+
+      it('should be de-duplicated by href attribute', async () => {
+        const App = () => {
+          const [count, setCount] = useState(0)
+          return (
+            <div>
+              <link rel='stylesheet' href='style-a.css' precedence='default' />
+              <link rel='stylesheet' href='style-b.css' precedence='high' />
+              {count === 1 && (
+                <>
+                  <link rel='stylesheet' href='style-a.css' precedence='default' />
+                  <link rel='stylesheet' href='style-c.css' precedence='other' />
+                </>
+              )}
+              <button onClick={() => setCount(count + 1)}>+</button>
+              {count}
+            </div>
+          )
+        }
+        render(<App />, root)
+        expect(document.head.innerHTML).toBe(
+          '<link href="style-a.css" rel="stylesheet" data-precedence="default"><link href="style-b.css" rel="stylesheet" data-precedence="high">'
+        )
+        expect(root.innerHTML).toBe('<div><button>+</button>0</div>')
+        root.querySelector('button')?.click()
+        await Promise.resolve()
+        expect(document.head.innerHTML).toBe(
+          '<link href="style-a.css" rel="stylesheet" data-precedence="default"><link href="style-b.css" rel="stylesheet" data-precedence="high"><link href="style-c.css" rel="stylesheet" data-precedence="other">'
+        )
+        expect(root.innerHTML).toBe('<div><button>+</button>1</div>')
+      })
+
+      it('should be preserved when unmounted', async () => {
+        const App = () => {
+          const [count, setCount] = useState(0)
+          return (
+            <div>
+              {count === 1 && <link rel='stylesheet' href='style.css' precedence='default' />}
+              <div>{count}</div>
+              <button onClick={() => setCount(count + 1)}>+</button>
+            </div>
+          )
+        }
+        render(<App />, root)
+        expect(document.head.innerHTML).toBe('')
+        expect(root.innerHTML).toBe('<div><div>0</div><button>+</button></div>')
+        root.querySelector('button')?.click()
+        await Promise.resolve()
+        expect(document.head.innerHTML).toBe(
+          '<link href="style.css" rel="stylesheet" data-precedence="default">'
+        )
+        expect(root.innerHTML).toBe('<div><div>1</div><button>+</button></div>')
+        root.querySelector('button')?.click()
+        await Promise.resolve()
+        expect(document.head.innerHTML).toBe(
+          '<link href="style.css" rel="stylesheet" data-precedence="default">'
+        )
+        expect(root.innerHTML).toBe('<div><div>2</div><button>+</button></div>')
+      })
+
+      it('should be blocked by blocking attribute', async () => {
+        const Component = () => {
+          return (
+            <Suspense fallback={<div>Loading...</div>}>
+              <div>
+                <link
+                  rel='stylesheet'
+                  href='http://localhost/style.css'
+                  precedence='default'
+                  blocking='render'
+                />
+                Content
+              </div>
+            </Suspense>
+          )
+        }
+        const App = () => {
+          const [show, setShow] = useState(false)
+          return (
+            <div>
+              {show && <Component />}
+              <button onClick={() => setShow(true)}>Show</button>
+            </div>
+          )
+        }
+        render(<App />, root)
+        expect(document.head.innerHTML).toBe('')
+        expect(root.innerHTML).toBe('<div><button>Show</button></div>')
+        root.querySelector('button')?.click()
+        await Promise.resolve()
+        expect(root.innerHTML).toBe('<div><div>Loading...</div><button>Show</button></div>')
+        await new Promise((resolve) => setTimeout(resolve))
+        await Promise.resolve()
+        expect(root.innerHTML).toBe('<div><div>Content</div><button>Show</button></div>')
+      })
+    })
+
+    describe('style element', () => {
+      it('should be inserted into head', () => {
+        const App = () => {
+          return (
+            <div>
+              <style href='red' precedence='default'>
+                {'body { color: red; }'}
+              </style>
+              Content
+            </div>
+          )
+        }
+        render(<App />, root)
+        expect(document.head.innerHTML).toBe(
+          '<style data-href="red" data-precedence="default">body { color: red; }</style>'
+        )
+        expect(root.innerHTML).toBe('<div>Content</div>')
+      })
+
+      it('should be updated', async () => {
+        const App = () => {
+          const [count, setCount] = useState(0)
+          return (
+            <div>
+              <style href='color' precedence='default'>{`body { color: ${
+                count % 2 ? 'red' : 'blue'
+              }; }`}</style>
+              <button onClick={() => setCount(count + 1)}>+</button>
+            </div>
+          )
+        }
+        render(<App />, root)
+        expect(document.head.innerHTML).toBe(
+          '<style data-href="color" data-precedence="default">body { color: blue; }</style>'
+        )
+        expect(root.innerHTML).toBe('<div><button>+</button></div>')
+        root.querySelector('button')?.click()
+        await Promise.resolve()
+        expect(document.head.innerHTML).toBe(
+          '<style data-href="color" data-precedence="default">body { color: red; }</style>'
+        )
+      })
+
+      it('should be preserved when unmounted', async () => {
+        const App = () => {
+          const [count, setCount] = useState(0)
+          return (
+            <div>
+              {count === 1 && (
+                <style href='red' precedence='default'>
+                  {'body { color: red; }'}
+                </style>
+              )}
+              <div>{count}</div>
+              <button onClick={() => setCount(count + 1)}>+</button>
+            </div>
+          )
+        }
+        render(<App />, root)
+        expect(document.head.innerHTML).toBe('')
+        expect(root.innerHTML).toBe('<div><div>0</div><button>+</button></div>')
+        root.querySelector('button')?.click()
+        await Promise.resolve()
+        expect(document.head.innerHTML).toBe(
+          '<style data-href="red" data-precedence="default">body { color: red; }</style>'
+        )
+        expect(root.innerHTML).toBe('<div><div>1</div><button>+</button></div>')
+        root.querySelector('button')?.click()
+        await Promise.resolve()
+        expect(document.head.innerHTML).toBe(
+          '<style data-href="red" data-precedence="default">body { color: red; }</style>'
+        )
+        expect(root.innerHTML).toBe('<div><div>2</div><button>+</button></div>')
+      })
+
+      it('should be de-duplicated by href attribute', async () => {
+        const App = () => {
+          const [count, setCount] = useState(0)
+          return (
+            <div>
+              <style href='red' precedence='default'>
+                {'body { color: red; }'}
+              </style>
+              <style href='blue' precedence='default'>
+                {'body { color: blue; }'}
+              </style>
+              <style href='green' precedence='default'>
+                {'body { color: green; }'}
+              </style>
+              {count === 1 && (
+                <>
+                  <style href='blue' precedence='default'>
+                    {'body { color: blue; }'}
+                  </style>
+                  <style href='yellow' precedence='default'>
+                    {'body { color: yellow; }'}
+                  </style>
+                </>
+              )}
+              <button onClick={() => setCount(count + 1)}>+</button>
+              {count}
+            </div>
+          )
+        }
+        render(<App />, root)
+        expect(document.head.innerHTML).toBe(
+          '<style data-href="red" data-precedence="default">body { color: red; }</style><style data-href="blue" data-precedence="default">body { color: blue; }</style><style data-href="green" data-precedence="default">body { color: green; }</style>'
+        )
+        expect(root.innerHTML).toBe('<div><button>+</button>0</div>')
+        root.querySelector('button')?.click()
+        await Promise.resolve()
+        expect(document.head.innerHTML).toBe(
+          '<style data-href="red" data-precedence="default">body { color: red; }</style><style data-href="blue" data-precedence="default">body { color: blue; }</style><style data-href="green" data-precedence="default">body { color: green; }</style><style data-href="yellow" data-precedence="default">body { color: yellow; }</style>'
+        )
+        expect(root.innerHTML).toBe('<div><button>+</button>1</div>')
+      })
+
+      it('should be ordered by precedence attribute', () => {
+        const App = () => {
+          return (
+            <div>
+              <style href='red' precedence='default'>
+                {'body { color: red; }'}
+              </style>
+              <style href='green' precedence='high'>
+                {'body { color: green; }'}
+              </style>
+              <style href='blue' precedence='default'>
+                {'body { color: blue; }'}
+              </style>
+              Content
+            </div>
+          )
+        }
+        render(<App />, root)
+        expect(document.head.innerHTML).toBe(
+          '<style data-href="red" data-precedence="default">body { color: red; }</style><style data-href="blue" data-precedence="default">body { color: blue; }</style><style data-href="green" data-precedence="high">body { color: green; }</style>'
+        )
+        expect(root.innerHTML).toBe('<div>Content</div>')
+      })
+
+      it('should not do special behavior if href is present', () => {
+        const template = (
+          <html>
+            <head></head>
+            <body>
+              <style>{'body { color: red; }'}</style>
+              <h1>World</h1>
+            </body>
+          </html>
+        )
+        render(template, root)
+        expect(document.head.innerHTML).toBe('')
+        expect(root.innerHTML).toBe(
+          '<html><head></head><body><style>body { color: red; }</style><h1>World</h1></body></html>'
+        )
+      })
+    })
+
+    describe('meta element', () => {
+      it('should be inserted into head', () => {
+        const App = () => {
+          return (
+            <div>
+              <meta name='description' content='description' />
+              Content
+            </div>
+          )
+        }
+        render(<App />, root)
+        expect(document.head.innerHTML).toBe('<meta name="description" content="description">')
+        expect(root.innerHTML).toBe('<div>Content</div>')
+      })
+
+      it('should be updated', async () => {
+        const App = () => {
+          const [count, setCount] = useState(0)
+          return (
+            <div>
+              <meta name='description' content={`description ${count}`} />
+              <button onClick={() => setCount(count + 1)}>+</button>
+            </div>
+          )
+        }
+        render(<App />, root)
+        expect(document.head.innerHTML).toBe('<meta name="description" content="description 0">')
+        expect(root.innerHTML).toBe('<div><button>+</button></div>')
+        root.querySelector('button')?.click()
+        await Promise.resolve()
+        expect(document.head.innerHTML).toBe('<meta name="description" content="description 1">')
+      })
+
+      it('should not do special behavior if itemProp is present', () => {
+        const App = () => {
+          return (
+            <div>
+              <meta name='description' content='description' itemProp='test' />
+              Content
+            </div>
+          )
+        }
+        render(<App />, root)
+        expect(document.head.innerHTML).toBe('')
+        expect(root.innerHTML).toBe(
+          '<div><meta name="description" content="description" itemprop="test">Content</div>'
+        )
+      })
+
+      it('should be ordered by precedence attribute', () => {
+        const App = () => {
+          return (
+            <div>
+              <meta name='description-a' content='description-a' precedence='default' />
+              <meta name='description-b' content='description-b' precedence='high' />
+              <meta name='description-c' content='description-c' precedence='default' />
+              Content
+            </div>
+          )
+        }
+        render(<App />, root)
+        expect(document.head.innerHTML).toBe(
+          '<meta name="description-a" content="description-a"><meta name="description-b" content="description-b"><meta name="description-c" content="description-c">'
+        )
+        expect(root.innerHTML).toBe('<div>Content</div>')
+      })
+
+      it('should be de-duplicated by name attribute', async () => {
+        const App = () => {
+          const [count, setCount] = useState(0)
+          return (
+            <div>
+              <meta name='description-a' content='description-a' />
+              <meta name='description-b' content='description-b' />
+              {count === 1 && (
+                <>
+                  <meta name='description-a' content='description-a' />
+                  <meta name='description-c' content='description-c' />
+                </>
+              )}
+              <button onClick={() => setCount(count + 1)}>+</button>
+              {count}
+            </div>
+          )
+        }
+        render(<App />, root)
+        expect(document.head.innerHTML).toBe(
+          '<meta name="description-a" content="description-a"><meta name="description-b" content="description-b">'
+        )
+        expect(root.innerHTML).toBe('<div><button>+</button>0</div>')
+        root.querySelector('button')?.click()
+        await Promise.resolve()
+        expect(document.head.innerHTML).toBe(
+          '<meta name="description-a" content="description-a"><meta name="description-b" content="description-b"><meta name="description-c" content="description-c">'
+        )
+        expect(root.innerHTML).toBe('<div><button>+</button>1</div>')
+      })
+    })
+
+    describe('script element', () => {
+      it('should be inserted into head', async () => {
+        const App = () => {
+          return (
+            <div>
+              <script src='script.js' async={true} />
+              Content
+            </div>
+          )
+        }
+        render(<App />, root)
+        expect(document.head.innerHTML).toBe('<script src="script.js" async=""></script>')
+        expect(root.innerHTML).toBe('<div>Content</div>')
+      })
+
+      it('should be updated', async () => {
+        const App = () => {
+          const [count, setCount] = useState(0)
+          return (
+            <div>
+              <script src={`script${count}.js`} async={true} />
+              <button onClick={() => setCount(count + 1)}>+</button>
+            </div>
+          )
+        }
+        render(<App />, root)
+        expect(document.head.innerHTML).toBe('<script src="script0.js" async=""></script>')
+        expect(root.innerHTML).toBe('<div><button>+</button></div>')
+        root.querySelector('button')?.click()
+        await Promise.resolve()
+        expect(document.head.innerHTML).toBe('<script src="script1.js" async=""></script>')
+      })
+
+      it('should be de-duplicated by src attribute with async=true', async () => {
+        const App = () => {
+          const [count, setCount] = useState(0)
+          return (
+            <div>
+              <script src='script-a.js' async={true} />
+              <script src='script-b.js' async={true} />
+              {count === 1 && (
+                <>
+                  <script src='script-a.js' async={true} />
+                  <script src='script-c.js' async={true} />
+                </>
+              )}
+              <button onClick={() => setCount(count + 1)}>+</button>
+              {count}
+            </div>
+          )
+        }
+        render(<App />, root)
+        expect(document.head.innerHTML).toBe(
+          '<script src="script-a.js" async=""></script><script src="script-b.js" async=""></script>'
+        )
+        expect(root.innerHTML).toBe('<div><button>+</button>0</div>')
+        root.querySelector('button')?.click()
+        await Promise.resolve()
+        expect(document.head.innerHTML).toBe(
+          '<script src="script-a.js" async=""></script><script src="script-b.js" async=""></script><script src="script-c.js" async=""></script>'
+        )
+        expect(root.innerHTML).toBe('<div><button>+</button>1</div>')
+      })
+
+      it('should be preserved when unmounted', async () => {
+        const App = () => {
+          const [count, setCount] = useState(0)
+          return (
+            <div>
+              {count === 1 && <script src='script.js' async={true} />}
+              <div>{count}</div>
+              <button onClick={() => setCount(count + 1)}>+</button>
+            </div>
+          )
+        }
+        render(<App />, root)
+        expect(document.head.innerHTML).toBe('')
+        expect(root.innerHTML).toBe('<div><div>0</div><button>+</button></div>')
+        root.querySelector('button')?.click()
+        await Promise.resolve()
+        expect(document.head.innerHTML).toBe('<script src="script.js" async=""></script>')
+        expect(root.innerHTML).toBe('<div><div>1</div><button>+</button></div>')
+        root.querySelector('button')?.click()
+        await Promise.resolve()
+        expect(document.head.innerHTML).toBe('<script src="script.js" async=""></script>')
+        expect(root.innerHTML).toBe('<div><div>2</div><button>+</button></div>')
+      })
+
+      it('should be fired onLoad event', async () => {
+        const onLoad = vi.fn()
+        const onError = vi.fn()
+        const App = () => {
+          return (
+            <div>
+              <script
+                src='http://localhost/script.js'
+                async={true}
+                onLoad={onLoad}
+                onError={onError}
+              />
+              Content
+            </div>
+          )
+        }
+        render(<App />, root)
+        expect(document.head.innerHTML).toBe(
+          '<script src="http://localhost/script.js" async=""></script>'
+        )
+        await Promise.resolve()
+        await new Promise((resolve) => setTimeout(resolve))
+        expect(onLoad).toBeCalledTimes(1)
+        expect(onError).not.toBeCalled()
+      })
+
+      it('should be fired onError event', async () => {
+        const onLoad = vi.fn()
+        const onError = vi.fn()
+        const App = () => {
+          return (
+            <div>
+              <script
+                src='http://localhost/invalid.js'
+                async={true}
+                onLoad={onLoad}
+                onError={onError}
+              />
+              Content
+            </div>
+          )
+        }
+        render(<App />, root)
+        expect(document.head.innerHTML).toBe(
+          '<script src="http://localhost/invalid.js" async=""></script>'
+        )
+        await Promise.resolve()
+        await new Promise((resolve) => setTimeout(resolve))
+        await Promise.resolve()
+        await new Promise((resolve) => setTimeout(resolve))
+        await Promise.resolve()
+        await new Promise((resolve) => setTimeout(resolve))
+        await Promise.resolve()
+        await new Promise((resolve) => setTimeout(resolve))
+        expect(onLoad).not.toBeCalled()
+        expect(onError).toBeCalledTimes(1)
+      })
+
+      it('should be blocked by blocking attribute', async () => {
+        const Component = () => {
+          return (
+            <Suspense fallback={<div>Loading...</div>}>
+              <div>
+                <script src='http://localhost/script.js' async={true} blocking='render' />
+                Content
+              </div>
+            </Suspense>
+          )
+        }
+        const App = () => {
+          const [show, setShow] = useState(false)
+          return (
+            <div>
+              {show && <Component />}
+              <button onClick={() => setShow(true)}>Show</button>
+            </div>
+          )
+        }
+        render(<App />, root)
+        expect(document.head.innerHTML).toBe('')
+        expect(root.innerHTML).toBe('<div><button>Show</button></div>')
+        root.querySelector('button')?.click()
+        await Promise.resolve()
+        expect(root.innerHTML).toBe('<div><div>Loading...</div><button>Show</button></div>')
+        await new Promise((resolve) => setTimeout(resolve))
+        await Promise.resolve()
+        expect(root.innerHTML).toBe('<div><div>Content</div><button>Show</button></div>')
+      })
+    })
+
+    it('accept ref object', async () => {
+      const ref = { current: null }
+      const App = () => {
+        return (
+          <div>
+            <script src='script-a.js' ref={ref} async={true} />
+          </div>
+        )
+      }
+      render(<App />, root)
+      expect(ref.current).toBe(document.head.querySelector('script'))
+    })
+
+    it('accept ref function', async () => {
+      const ref = vi.fn()
+      const App = () => {
+        return (
+          <div>
+            <script src='script-a.js' ref={ref} async={true} />
+          </div>
+        )
+      }
+      render(<App />, root)
+      expect(ref).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  describe('form element', () => {
+    it('should accept Function as action', () => {
+      const action = vi.fn()
+      const App = () => {
+        return (
+          <form action={action} method='post'>
+            <input type='text' name='name' value='Hello' />
+            <button type='submit'>Submit</button>
+          </form>
+        )
+      }
+      render(<App />, root)
+      root.querySelector('button')?.click()
+      expect(action).toBeCalledTimes(1)
+      const formData = action.mock.calls[0][0]
+      expect(formData.get('name')).toBe('Hello')
+    })
+
+    it('should accept string as action', () => {
+      const App = () => {
+        return (
+          <form action={'/entries'} method='post'>
+            <button type='submit'>Submit</button>
+          </form>
+        )
+      }
+      render(<App />, root)
+      expect(root.innerHTML).toBe(
+        '<form method="post" action="/entries"><button type="submit">Submit</button></form>'
+      )
+    })
+
+    it('toggle show / hide form', async () => {
+      const action = vi.fn()
+      const App = () => {
+        const [show, setShow] = useState(false)
+        return (
+          <div>
+            {show && (
+              <form action={action} method='post'>
+                <input type='text' name='name' value='Hello' />
+              </form>
+            )}
+            <button onClick={() => setShow((status) => !status)}>Toggle</button>
+          </div>
+        )
+      }
+      render(<App />, root)
+      expect(root.innerHTML).toBe('<div><button>Toggle</button></div>')
+      root.querySelector('button')?.click()
+      await Promise.resolve()
+      expect(root.innerHTML).toBe(
+        '<div><form method="post"><input type="text" name="name" value="Hello"></form><button>Toggle</button></div>'
+      )
+      root.querySelector('button')?.click()
+      await Promise.resolve()
+      await Promise.resolve()
+      await Promise.resolve()
+      expect(root.innerHTML).toBe('<div><button>Toggle</button></div>')
+    })
+  })
+
+  describe('input element', () => {
+    it('should accept Function as formAction', () => {
+      const action = vi.fn()
+      const App = () => {
+        return (
+          <form>
+            <input type='text' name='name' value='Hello' />
+            <input type='submit' value='Submit' formAction={action} />
+          </form>
+        )
+      }
+      render(<App />, root)
+      root.querySelector<HTMLInputElement>('input[type="submit"]')?.click()
+      expect(action).toBeCalledTimes(1)
+      const formData = action.mock.calls[0][0]
+      expect(formData.get('name')).toBe('Hello')
+    })
+
+    it('should accept string as formAction', () => {
+      const App = () => {
+        return (
+          <form method='post'>
+            <input type='submit' formAction={'/entries'} value='Submit' />
+          </form>
+        )
+      }
+      render(<App />, root)
+      expect(root.innerHTML).toBe('<form method="post"><input type="submit" value="Submit"></form>')
+    })
+
+    it('toggle show / hide input', async () => {
+      const action = vi.fn()
+      const App = () => {
+        const [show, setShow] = useState(false)
+        return (
+          <div>
+            {show && (
+              <form method='post'>
+                <input type='submit' formAction={action} value='Submit' />
+              </form>
+            )}
+            <button onClick={() => setShow((status) => !status)}>Toggle</button>
+          </div>
+        )
+      }
+      render(<App />, root)
+      expect(root.innerHTML).toBe('<div><button>Toggle</button></div>')
+      root.querySelector('button')?.click()
+      await Promise.resolve()
+      expect(root.innerHTML).toBe(
+        '<div><form method="post"><input type="submit" value="Submit"></form><button>Toggle</button></div>'
+      )
+      root.querySelector('button')?.click()
+      await Promise.resolve()
+      await Promise.resolve()
+      await Promise.resolve()
+      expect(root.innerHTML).toBe('<div><button>Toggle</button></div>')
+    })
+  })
+
+  describe('button element', () => {
+    it('should accept Function as formAction', () => {
+      const action = vi.fn()
+      const App = () => {
+        return (
+          <form>
+            <input type='text' name='name' value='Hello' />
+            <button type='submit' formAction={action}>
+              Submit
+            </button>
+          </form>
+        )
+      }
+      render(<App />, root)
+      root.querySelector('button')?.click()
+      expect(action).toBeCalledTimes(1)
+      const formData = action.mock.calls[0][0]
+      expect(formData.get('name')).toBe('Hello')
+    })
+
+    it('should accept string as formAction', () => {
+      const App = () => {
+        return (
+          <form method='post'>
+            <button type='submit' formAction={'/entries'}>
+              Submit
+            </button>
+          </form>
+        )
+      }
+      render(<App />, root)
+      expect(root.innerHTML).toBe(
+        '<form method="post"><button type="submit">Submit</button></form>'
+      )
+    })
+
+    it('toggle show / hide', async () => {
+      const action = vi.fn()
+      const App = () => {
+        const [show, setShow] = useState(false)
+        return (
+          <div>
+            {show && (
+              <form method='post'>
+                <button formAction={action}>Submit</button>
+              </form>
+            )}
+            <button id='toggle' onClick={() => setShow((status) => !status)}>
+              Toggle
+            </button>
+          </div>
+        )
+      }
+      render(<App />, root)
+      expect(root.innerHTML).toBe('<div><button id="toggle">Toggle</button></div>')
+      root.querySelector<HTMLButtonElement>('#toggle')?.click()
+      await Promise.resolve()
+      expect(root.innerHTML).toBe(
+        '<div><form method="post"><button>Submit</button></form><button id="toggle">Toggle</button></div>'
+      )
+      root.querySelector<HTMLButtonElement>('#toggle')?.click()
+      await Promise.resolve()
+      await Promise.resolve()
+      await Promise.resolve()
+      expect(root.innerHTML).toBe('<div><button id="toggle">Toggle</button></div>')
+    })
+  })
+})
+
+describe('internal utility method', () => {
+  describe('composeRef()', () => {
+    it('should compose a ref object', () => {
+      const ref = { current: null }
+      const cbCleanUp = vi.fn()
+      const cb = vi.fn().mockReturnValue(cbCleanUp)
+      const composed = composeRef(ref, cb)
+      const cleanup = composed('ref')
+      expect(ref.current).toBe('ref')
+      expect(cb).toBeCalledWith('ref')
+      expect(cbCleanUp).not.toBeCalled()
+      cleanup()
+      expect(ref.current).toBe(null)
+      expect(cbCleanUp).toBeCalledTimes(1)
+    })
+
+    it('should compose a function', () => {
+      const ref = vi.fn()
+      const cbCleanUp = vi.fn()
+      const cb = vi.fn().mockReturnValue(cbCleanUp)
+      const composed = composeRef(ref, cb)
+      const cleanup = composed('ref')
+      expect(ref).toBeCalledWith('ref')
+      expect(cb).toBeCalledWith('ref')
+      expect(cbCleanUp).not.toBeCalled()
+      cleanup()
+      expect(ref).toBeCalledWith(null)
+      expect(cbCleanUp).toBeCalledTimes(1)
+    })
+
+    it('should compose a function returns a cleanup function', () => {
+      const refCleanUp = vi.fn()
+      const ref = vi.fn().mockReturnValue(refCleanUp)
+      const cbCleanUp = vi.fn()
+      const cb = vi.fn().mockReturnValue(cbCleanUp)
+      const composed = composeRef(ref, cb)
+      const cleanup = composed('ref')
+      expect(ref).toBeCalledWith('ref')
+      expect(cb).toBeCalledWith('ref')
+      expect(refCleanUp).not.toBeCalled()
+      expect(cbCleanUp).not.toBeCalled()
+      cleanup()
+      expect(ref).toHaveBeenCalledTimes(1)
+      expect(refCleanUp).toBeCalledTimes(1)
+      expect(cbCleanUp).toBeCalledTimes(1)
+    })
+  })
+})
diff --git a/src/jsx/dom/intrinsic-element/components.ts b/src/jsx/dom/intrinsic-element/components.ts
new file mode 100644
index 000000000..6806d155b
--- /dev/null
+++ b/src/jsx/dom/intrinsic-element/components.ts
@@ -0,0 +1,379 @@
+import type { Props } from '../../base'
+import type { FC, JSXNode, PropsWithChildren, RefObject } from '../../types'
+import { newJSXNode } from '../utils'
+import { createPortal, getNameSpaceContext } from '../render'
+import type { PreserveNodeType } from '../render'
+import { useContext } from '../../context'
+import { use, useCallback, useMemo, useState } from '../../hooks'
+import { FormContext, registerAction } from '../hooks'
+import { dataPrecedenceAttr, deDupeKeyMap, domRenderers } from '../../intrinsic-element/common'
+import type { IntrinsicElements } from '../../intrinsic-elements'
+
+// this function is a testing utility and should not be exported to the user
+export const clearCache = () => {
+  blockingPromiseMap = Object.create(null)
+  createdElements = Object.create(null)
+}
+
+// this function is exported for testing and should not be used by the user
+export const composeRef = <T>(
+  ref: RefObject<T> | Function | undefined,
+  cb: (e: T) => void | (() => void)
+): ((e: T) => () => void) => {
+  return useMemo(
+    () => (e: T) => {
+      let refCleanup: (() => void) | undefined
+      if (ref) {
+        if (typeof ref === 'function') {
+          refCleanup =
+            ref(e) ||
+            (() => {
+              ref(null)
+            })
+        } else if (ref && 'current' in ref) {
+          ref.current = e
+          refCleanup = () => {
+            ref.current = null
+          }
+        }
+      }
+
+      const cbCleanup = cb(e)
+      return () => {
+        cbCleanup?.()
+        refCleanup?.()
+      }
+    },
+    [ref]
+  )
+}
+
+let blockingPromiseMap: Record<string, Promise<Event> | undefined> = Object.create(null)
+let createdElements: Record<string, HTMLElement> = Object.create(null)
+const documentMetadataTag = (
+  tag: string,
+  props: Props,
+  preserveNodeType: PreserveNodeType | undefined,
+  supportSort: boolean,
+  supportBlocking: boolean
+) => {
+  if (props?.itemProp) {
+    return newJSXNode({
+      tag,
+      props,
+    })
+  }
+
+  const head = document.head
+
+  let { onLoad, onError, precedence, blocking, ...restProps } = props
+  let element: HTMLElement | null = null
+  let created = false
+
+  const deDupeKeys = deDupeKeyMap[tag]
+  let existingElements: NodeListOf<HTMLElement> | undefined = undefined
+  if (deDupeKeys.length > 0) {
+    const tags = head.querySelectorAll<HTMLElement>(tag)
+    LOOP: for (const e of tags) {
+      for (const key of deDupeKeyMap[tag]) {
+        if (e.getAttribute(key) === props[key]) {
+          element = e
+          break LOOP
+        }
+      }
+    }
+
+    if (!element) {
+      const cacheKey = deDupeKeys.reduce(
+        (acc, key) => (props[key] === undefined ? acc : `${acc}-${key}-${props[key]}`),
+        tag
+      )
+      created = !createdElements[cacheKey]
+      element = createdElements[cacheKey] ||= (() => {
+        const e = document.createElement(tag)
+        for (const key of deDupeKeys) {
+          if (props[key] !== undefined) {
+            e.setAttribute(key, props[key] as string)
+          }
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          if ((props as any).rel) {
+            e.setAttribute('rel', props.rel)
+          }
+        }
+        return e
+      })()
+    }
+  } else {
+    existingElements = head.querySelectorAll<HTMLElement>(tag)
+  }
+
+  precedence = supportSort ? precedence ?? '' : undefined
+  if (supportSort) {
+    restProps[dataPrecedenceAttr] = precedence
+  }
+
+  const insert = useCallback(
+    (e: HTMLElement) => {
+      if (deDupeKeys.length > 0) {
+        let found = false
+        for (const existingElement of head.querySelectorAll<HTMLElement>(tag)) {
+          if (found && existingElement.getAttribute(dataPrecedenceAttr) !== precedence) {
+            head.insertBefore(e, existingElement)
+            return
+          }
+          if (existingElement.getAttribute(dataPrecedenceAttr) === precedence) {
+            found = true
+          }
+        }
+
+        // if sentinel is not found, append to the end
+        head.appendChild(e)
+      } else if (existingElements) {
+        let found = false
+        for (const existingElement of existingElements!) {
+          if (existingElement === e) {
+            found = true
+            break
+          }
+        }
+        if (!found) {
+          // newly created element
+          head.insertBefore(
+            e,
+            head.contains(existingElements[0]) ? existingElements[0] : head.querySelector(tag)
+          )
+        }
+        existingElements = undefined
+      }
+    },
+    [precedence]
+  )
+
+  const ref = composeRef(props.ref, (e: HTMLElement) => {
+    const key = deDupeKeys[0]
+
+    if (preserveNodeType === 2) {
+      e.innerHTML = ''
+    }
+
+    if (created || existingElements) {
+      insert(e)
+    }
+
+    if (!onError && !onLoad) {
+      return
+    }
+
+    let promise = (blockingPromiseMap[e.getAttribute(key) as string] ||= new Promise<Event>(
+      (resolve, reject) => {
+        e.addEventListener('load', resolve)
+        e.addEventListener('error', reject)
+      }
+    ))
+    if (onLoad) {
+      promise = promise.then(onLoad)
+    }
+    if (onError) {
+      promise = promise.catch(onError)
+    }
+    promise.catch(() => {})
+  })
+
+  if (supportBlocking && blocking === 'render') {
+    const key = deDupeKeyMap[tag][0]
+    if (props[key]) {
+      const value = props[key]
+      const promise = (blockingPromiseMap[value] ||= new Promise<Event>((resolve, reject) => {
+        insert(element as HTMLElement)
+        element!.addEventListener('load', resolve)
+        element!.addEventListener('error', reject)
+      }))
+      use(promise)
+    }
+  }
+
+  const jsxNode = newJSXNode({
+    tag,
+    props: {
+      ...restProps,
+      ref,
+    },
+  }) as JSXNode & { e?: HTMLElement; p?: PreserveNodeType }
+
+  jsxNode.p = preserveNodeType // preserve for unmounting
+  if (element) {
+    jsxNode.e = element
+  }
+
+  return createPortal(
+    jsxNode,
+    head
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ) as any
+}
+export const title: FC<PropsWithChildren> = (props) => {
+  const nameSpaceContext = getNameSpaceContext()
+  const ns = nameSpaceContext && useContext(nameSpaceContext)
+  if (ns?.endsWith('svg')) {
+    return newJSXNode({
+      tag: 'title',
+      props,
+    })
+  }
+  return documentMetadataTag('title', props, undefined, false, false)
+}
+
+export const script: FC<PropsWithChildren<IntrinsicElements['script']>> = (props) => {
+  if (!props || ['src', 'async'].some((k) => !props[k])) {
+    return newJSXNode({
+      tag: 'style',
+      props,
+    })
+  }
+  return documentMetadataTag('script', props, 1, false, true)
+}
+
+export const style: FC<PropsWithChildren<IntrinsicElements['style']>> = (props) => {
+  if (!props || !['href', 'precedence'].every((k) => k in props)) {
+    return newJSXNode({
+      tag: 'style',
+      props,
+    })
+  }
+  props['data-href'] = props.href
+  delete props.href
+  return documentMetadataTag('style', props, 2, true, true)
+}
+
+export const link: FC<PropsWithChildren<IntrinsicElements['link']>> = (props) => {
+  if (
+    !props ||
+    ['onLoad', 'onError'].some((k) => k in props) ||
+    (props.rel === 'stylesheet' && (!('precedence' in props) || 'disabled' in props))
+  ) {
+    return newJSXNode({
+      tag: 'link',
+      props,
+    })
+  }
+  return documentMetadataTag('link', props, 1, 'precedence' in props, true)
+}
+
+export const meta: FC<PropsWithChildren> = (props) => {
+  return documentMetadataTag('meta', props, undefined, false, false)
+}
+
+const customEventFormAction = Symbol()
+export const form: FC<
+  PropsWithChildren<{
+    action?: Function | string
+    method?: 'get' | 'post'
+    ref?: RefObject<HTMLFormElement> | ((e: HTMLFormElement | null) => void | (() => void))
+  }>
+> = (props) => {
+  const { action, ...restProps } = props
+  if (typeof action !== 'function') {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    ;(restProps as any).action = action
+  }
+
+  const [data, setData] = useState<FormData | null>(null)
+  const onSubmit = useCallback<(ev: SubmitEvent | CustomEvent) => void>(
+    async (ev: SubmitEvent | CustomEvent) => {
+      const currentAction = ev.isTrusted
+        ? action
+        : (ev as CustomEvent).detail[customEventFormAction]
+      if (typeof currentAction !== 'function') {
+        return
+      }
+
+      ev.preventDefault()
+      const formData = new FormData(ev.target as HTMLFormElement)
+      setData(formData)
+      const actionRes = currentAction(formData)
+      if (actionRes instanceof Promise) {
+        registerAction(actionRes)
+        await actionRes
+      }
+      setData(null)
+    },
+    []
+  )
+
+  const ref = composeRef(props.ref, (el: HTMLFormElement) => {
+    el.addEventListener('submit', onSubmit)
+    return () => {
+      el.removeEventListener('submit', onSubmit)
+    }
+  })
+
+  return newJSXNode({
+    tag: FormContext as unknown as Function,
+    props: {
+      value: {
+        pending: data !== null,
+        data,
+        method: data ? 'post' : null,
+        action: data ? action : null,
+      },
+      children: newJSXNode({
+        tag: 'form',
+        props: {
+          ...restProps,
+          ref,
+        },
+      }),
+    },
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  }) as any
+}
+
+const formActionableElement = (
+  tag: string,
+  {
+    formAction,
+    ...props
+  }: {
+    formAction?: Function | string
+    ref?: RefObject<HTMLInputElement> | ((e: HTMLInputElement) => void | (() => void))
+  }
+) => {
+  if (typeof formAction === 'function') {
+    const onClick = useCallback<(ev: MouseEvent) => void>((ev: MouseEvent) => {
+      ev.preventDefault()
+      ;(ev.currentTarget! as HTMLInputElement).form!.dispatchEvent(
+        new CustomEvent('submit', { detail: { [customEventFormAction]: formAction } })
+      )
+    }, [])
+
+    props.ref = composeRef(props.ref, (el: HTMLInputElement) => {
+      el.addEventListener('click', onClick)
+      return () => {
+        el.removeEventListener('click', onClick)
+      }
+    })
+  }
+
+  return newJSXNode({
+    tag,
+    props,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  }) as any
+}
+
+export const input: FC<PropsWithChildren<IntrinsicElements['input']>> = (props) =>
+  formActionableElement('input', props)
+
+export const button: FC<PropsWithChildren<IntrinsicElements['button']>> = (props) =>
+  formActionableElement('button', props)
+
+Object.assign(domRenderers, {
+  title,
+  script,
+  style,
+  link,
+  meta,
+  form,
+  input,
+  button,
+})
diff --git a/src/jsx/dom/jsx-dev-runtime.ts b/src/jsx/dom/jsx-dev-runtime.ts
index 858e607fc..d5dc944e8 100644
--- a/src/jsx/dom/jsx-dev-runtime.ts
+++ b/src/jsx/dom/jsx-dev-runtime.ts
@@ -5,10 +5,13 @@
 
 import type { JSXNode, Props } from '../base'
 import { newJSXNode } from './utils'
+import * as intrinsicElementTags from './intrinsic-element/components'
 
 export const jsxDEV = (tag: string | Function, props: Props, key?: string): JSXNode => {
   return newJSXNode({
-    tag,
+    tag:
+      (typeof tag === 'string' && intrinsicElementTags[tag as keyof typeof intrinsicElementTags]) ||
+      tag,
     props,
     key,
   })
diff --git a/src/jsx/dom/render.ts b/src/jsx/dom/render.ts
index ca05ad6d8..8145235f0 100644
--- a/src/jsx/dom/render.ts
+++ b/src/jsx/dom/render.ts
@@ -31,28 +31,32 @@ export type ErrorHandler = (error: any, retry: () => void) => Child | undefined
 type Container = HTMLElement | DocumentFragment
 type LocalJSXContexts = [JSXContext<unknown>, unknown][] | undefined
 type SupportedElement = HTMLElement | SVGElement | MathMLElement
+export type PreserveNodeType =
+  | 1 // preserve only self
+  | 2 // preserve self and children
 
 export type NodeObject = {
   pP: Props | undefined // previous props
   nN: Node | undefined // next node
   vC: Node[] // virtual dom children
+  pC?: Node[] // previous virtual dom children
   vR: Node[] // virtual dom children to remove
   s?: Node[] // shadow virtual dom children
   n?: string // namespace
   c: Container | undefined // container
   e: SupportedElement | Text | undefined // rendered element
+  p?: PreserveNodeType // preserve HTMLElement if it will be unmounted
+  a?: boolean // cancel apply() if true
   [DOM_STASH]:
     | [
         number, // current hook index
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         any[][], // stash for hooks
-        LocalJSXContexts // context
-      ]
-    | [
-        number,
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        any[][]
+        LocalJSXContexts, // context
+        [Context, Function, NodeObject] // [context, error handler, node] for closest error boundary or suspense
       ]
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    | [number, any[][]]
 } & JSXNode
 type NodeString = {
   t: string // text content
@@ -62,6 +66,7 @@ type NodeString = {
   // like a NodeObject
   vC: undefined
   nN: undefined
+  p?: true
   // from JSXNode
   key: undefined
   tag: undefined
@@ -83,7 +88,8 @@ export type Context =
       boolean, // got an error
       UpdateHook, // update hook
       boolean, // is in view transition
-      boolean // is in top level render
+      boolean, // is in top level render
+      [Context, Function, NodeObject][] //  [context, error handler, node] stack for this context
     ]
   | [PendingType, boolean, UpdateHook, boolean]
   | [PendingType, boolean, UpdateHook]
@@ -93,7 +99,10 @@ export type Context =
 
 export const buildDataStack: [Context, Node][] = []
 
+const refCleanupMap: WeakMap<Element, () => void> = new WeakMap()
+
 let nameSpaceContext: JSXContext<string> | undefined = undefined
+export const getNameSpaceContext = () => nameSpaceContext
 
 const isNodeString = (node: Node): node is NodeString => 't' in (node as NodeString)
 
@@ -137,11 +146,14 @@ const applyProps = (
       } else if (key === 'dangerouslySetInnerHTML' && value) {
         container.innerHTML = value.__html
       } else if (key === 'ref') {
+        let cleanup
         if (typeof value === 'function') {
-          value(container)
+          cleanup = value(container) || (() => value(null))
         } else if (value && 'current' in value) {
           value.current = container
+          cleanup = () => (value.current = null)
         }
+        refCleanupMap.set(container, cleanup)
       } else if (key === 'style') {
         const style = container.style
         if (typeof value === 'string') {
@@ -199,11 +211,7 @@ const applyProps = (
         if (eventSpec) {
           container.removeEventListener(eventSpec[0], value, eventSpec[1])
         } else if (key === 'ref') {
-          if (typeof value === 'function') {
-            value(null)
-          } else {
-            value.current = null
-          }
+          refCleanupMap.get(container)?.()
         } else {
           container.removeAttribute(toAttributeName(container, key))
         }
@@ -286,21 +294,22 @@ const removeNode = (node: Node): void => {
   if (!isNodeString(node)) {
     node[DOM_STASH]?.[1][STASH_EFFECT]?.forEach((data: EffectData) => data[2]?.())
 
-    if (node.e && node.props?.ref) {
-      if (typeof node.props.ref === 'function') {
-        node.props.ref(null)
-      } else {
-        node.props.ref.current = null
-      }
+    refCleanupMap.get(node.e as Element)?.()
+    if (node.p === 2) {
+      node.vC?.forEach((n) => (n.p = 2))
     }
     node.vC?.forEach(removeNode)
   }
-  if (node.tag !== HONO_PORTAL_ELEMENT) {
+  if (!node.p) {
     node.e?.remove()
+    delete node.e
   }
   if (typeof node.tag === 'function') {
     updateMap.delete(node)
     fallbackUpdateFnArrayMap.delete(node)
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    delete (node as any)[DOM_STASH][3] // delete explicitly for avoid circular reference
+    node.a = true
   }
 }
 
@@ -334,6 +343,7 @@ const findChildNodeIndex = (
   return
 }
 
+const cancelBuild = Symbol()
 const applyNodeObject = (node: NodeObject, container: Container): void => {
   const next: Node[] = []
   const remove: Node[] = []
@@ -381,40 +391,44 @@ const fallbackUpdateFnArrayMap: WeakMap<
   NodeObject,
   Array<() => Promise<NodeObject | undefined>>
 > = new WeakMap<NodeObject, Array<() => Promise<NodeObject | undefined>>>()
-export const build = (
-  context: Context,
-  node: NodeObject,
-  topLevelErrorHandlerNode: NodeObject | undefined,
-  children?: Child[]
-): void => {
-  let errorHandler: ErrorHandler | undefined
-  children ||=
-    typeof node.tag == 'function' ? invokeTag(context, node) : toArray(node.props.children)
-  if ((children[0] as JSXNode)?.tag === '') {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    errorHandler = (children[0] as any)[DOM_ERROR_HANDLER] as ErrorHandler
-    topLevelErrorHandlerNode ||= node
+export const build = (context: Context, node: NodeObject, children?: Child[]): void => {
+  const buildWithPreviousChildren = !children && node.pC
+  if (children) {
+    node.pC ||= node.vC
   }
-  const oldVChildren: Node[] = node.vC ? [...node.vC] : []
-  const vChildren: Node[] = []
-  node.vR = []
-  let prevNode: Node | undefined
+
+  let foundErrorHandler: ErrorHandler | undefined
   try {
+    children ||=
+      typeof node.tag == 'function' ? invokeTag(context, node) : toArray(node.props.children)
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    if ((children[0] as JSXNode)?.tag === '' && (children[0] as any)[DOM_ERROR_HANDLER]) {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      foundErrorHandler = (children[0] as any)[DOM_ERROR_HANDLER] as ErrorHandler
+      context[5]!.push([context, foundErrorHandler, node])
+    }
+    const oldVChildren: Node[] = buildWithPreviousChildren
+      ? [...(node.pC as Node[])]
+      : node.vC
+      ? [...node.vC]
+      : []
+    const vChildren: Node[] = []
+    node.vR = buildWithPreviousChildren ? [...node.vC] : []
+    let prevNode: Node | undefined
     children.flat().forEach((c: Child) => {
       let child = buildNode(c)
       if (child) {
-        if (prevNode) {
-          prevNode.nN = child
-        }
-        prevNode = child
-
         if (
           typeof child.tag === 'function' &&
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          !(child.tag as any)[DOM_INTERNAL_TAG] &&
-          globalJSXContexts.length > 0
+          !(child.tag as any)[DOM_INTERNAL_TAG]
         ) {
-          child[DOM_STASH][2] = globalJSXContexts.map((c) => [c, c.values.at(-1)])
+          if (globalJSXContexts.length > 0) {
+            child[DOM_STASH][2] = globalJSXContexts.map((c) => [c, c.values.at(-1)])
+          }
+          if (context[5]?.length) {
+            child[DOM_STASH][3] = context[5].at(-1) as [Context, ErrorHandler, NodeObject]
+          }
         }
 
         let oldChild: Node | undefined
@@ -444,6 +458,7 @@ export const build = (
             oldChild.props = child.props
             if (typeof child.tag === 'function') {
               oldChild[DOM_STASH][2] = child[DOM_STASH][2] || []
+              oldChild[DOM_STASH][3] = child[DOM_STASH][3]
             }
             child = oldChild
           }
@@ -455,23 +470,42 @@ export const build = (
         }
 
         if (!isNodeString(child)) {
-          build(context, child, topLevelErrorHandlerNode)
+          build(context, child)
         }
         vChildren.push(child)
+
+        for (let p = prevNode; p && !isNodeString(p); p = p.vC?.at(-1) as NodeObject) {
+          p.nN = child
+        }
+        prevNode = child
       }
     })
     node.vC = vChildren
     node.vR.push(...oldVChildren)
+    if (buildWithPreviousChildren) {
+      delete node.pC
+    }
   } catch (e) {
+    if (e === cancelBuild) {
+      if (foundErrorHandler) {
+        return
+      } else {
+        throw e
+      }
+    }
+
+    const [errorHandlerContext, errorHandler, errorHandlerNode] =
+      node[DOM_STASH]?.[3] || ([] as unknown as [undefined, undefined])
+
     if (errorHandler) {
       const fallbackUpdateFn = () =>
-        update([0, false, context[2] as UpdateHook], topLevelErrorHandlerNode as NodeObject)
+        update([0, false, context[2] as UpdateHook], errorHandlerNode as NodeObject)
       const fallbackUpdateFnArray =
-        fallbackUpdateFnArrayMap.get(topLevelErrorHandlerNode as NodeObject) || []
+        fallbackUpdateFnArrayMap.get(errorHandlerNode as NodeObject) || []
       fallbackUpdateFnArray.push(fallbackUpdateFn)
-      fallbackUpdateFnArrayMap.set(topLevelErrorHandlerNode as NodeObject, fallbackUpdateFnArray)
+      fallbackUpdateFnArrayMap.set(errorHandlerNode as NodeObject, fallbackUpdateFnArray)
       const fallback = errorHandler(e, () => {
-        const fnArray = fallbackUpdateFnArrayMap.get(topLevelErrorHandlerNode as NodeObject)
+        const fnArray = fallbackUpdateFnArrayMap.get(errorHandlerNode as NodeObject)
         if (fnArray) {
           const i = fnArray.indexOf(fallbackUpdateFn)
           if (i !== -1) {
@@ -482,14 +516,28 @@ export const build = (
       })
       if (fallback) {
         if (context[0] === 1) {
+          // low priority render
           context[1] = true
         } else {
-          build(context, node, topLevelErrorHandlerNode, [fallback])
+          build(context, errorHandlerNode, [fallback])
+          if (
+            (errorHandler.length === 1 || context !== errorHandlerContext) &&
+            errorHandlerNode.c
+          ) {
+            // render error boundary immediately
+            apply(errorHandlerNode, errorHandlerNode.c as Container)
+            return
+          }
         }
-        return
+        throw cancelBuild
       }
     }
+
     throw e
+  } finally {
+    if (foundErrorHandler) {
+      context[5]!.pop()
+    }
   }
 }
 
@@ -514,14 +562,13 @@ export const buildNode = (node: Child): Node | undefined => {
         nameSpaceContext ||= createContext('')
         ;(node as JSXNode).props.children = [
           {
-            tag: nameSpaceContext.Provider,
+            tag: nameSpaceContext,
             props: {
               value: ((node as NodeObject).n = `http://www.w3.org/${ns}`),
               children: (node as JSXNode).props.children,
             },
           },
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        ] as any
+        ]
       }
     }
     return node as NodeObject
@@ -539,7 +586,15 @@ const updateSync = (context: Context, node: NodeObject): void => {
   node[DOM_STASH][2]?.forEach(([c, v]) => {
     c.values.push(v)
   })
-  build(context, node, undefined)
+  try {
+    build(context, node, undefined)
+  } catch (e) {
+    return
+  }
+  if (node.a) {
+    delete node.a
+    return
+  }
   node[DOM_STASH][2]?.forEach(([c]) => {
     c.values.pop()
   })
@@ -558,6 +613,8 @@ export const update = async (
   context: Context,
   node: NodeObject
 ): Promise<NodeObject | undefined> => {
+  context[5] ||= []
+
   const existing = updateMap.get(node)
   if (existing) {
     // execute only the last update() call, so the previous update will be canceled.
@@ -597,6 +654,7 @@ export const update = async (
 
 export const renderNode = (node: NodeObject, container: Container): void => {
   const context: Context = []
+  ;(context as Context)[5] = [] // error handler stack
   ;(context as Context)[4] = true // start top level render
   build(context, node, undefined)
   ;(context as Context)[4] = false // finish top level render
@@ -634,5 +692,6 @@ export const createPortal = (children: Child, container: HTMLElement, key?: stri
     },
     key,
     e: container,
+    p: 1,
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
   } as any)
diff --git a/src/jsx/hooks/dom.test.tsx b/src/jsx/hooks/dom.test.tsx
index 6ad308feb..3ebd93400 100644
--- a/src/jsx/hooks/dom.test.tsx
+++ b/src/jsx/hooks/dom.test.tsx
@@ -2,7 +2,7 @@
 import { JSDOM } from 'jsdom'
 // run tests by old style jsx default
 // hono/jsx/jsx-runtime and hono/jsx/dom/jsx-runtime are tested in their respective settings
-import { Suspense, render } from '../dom'
+import { ErrorBoundary, Suspense, render } from '../dom'
 import {
   createRef,
   forwardRef,
@@ -150,10 +150,84 @@ describe('Hooks', () => {
       expect(called).toBe(2)
       await new Promise((r) => setTimeout(r))
       await new Promise((r) => setTimeout(r))
+      await new Promise((r) => setTimeout(r))
       expect(root.innerHTML).toBe('<div><button>1</button></div>')
       expect(called).toBe(3)
     })
 
+    it('pending', async () => {
+      let resolve: (() => void) | undefined
+      const promise = new Promise<void>((r) => (resolve = r))
+      let called = 0
+      const App = () => {
+        const [isPending, startTransition] = useTransition()
+        called++
+
+        return (
+          <div>
+            <button
+              onClick={() => {
+                startTransition(async () => await promise)
+              }}
+            >
+              {isPending ? 'Pending...' : 'Click me'}
+            </button>
+          </div>
+        )
+      }
+      render(<App />, root)
+      expect(root.innerHTML).toBe('<div><button>Click me</button></div>')
+      root.querySelector('button')?.click()
+      await Promise.resolve()
+      expect(root.innerHTML).toBe('<div><button>Pending...</button></div>')
+      expect(called).toBe(2)
+      resolve!()
+      await new Promise((r) => setTimeout(r))
+      await new Promise((r) => setTimeout(r))
+      await new Promise((r) => setTimeout(r))
+      expect(root.innerHTML).toBe('<div><button>Click me</button></div>')
+      expect(called).toBe(3)
+    })
+
+    it('pending - error', async () => {
+      let reject: (() => void) | undefined
+      const promise = new Promise<void>((_, r) => (reject = r))
+      let called = 0
+      const Component = () => {
+        const [isPending, startTransition] = useTransition()
+        called++
+
+        return (
+          <div>
+            <button
+              onClick={() => {
+                startTransition(async () => await promise)
+              }}
+            >
+              {isPending ? 'Pending...' : 'Click me'}
+            </button>
+          </div>
+        )
+      }
+      const App = () => (
+        <ErrorBoundary fallback={<div>Error</div>}>
+          <Component />
+        </ErrorBoundary>
+      )
+      render(<App />, root)
+      expect(root.innerHTML).toBe('<div><button>Click me</button></div>')
+      root.querySelector('button')?.click()
+      await Promise.resolve()
+      expect(root.innerHTML).toBe('<div><button>Pending...</button></div>')
+      expect(called).toBe(2)
+      reject!()
+      await new Promise((r) => setTimeout(r))
+      await new Promise((r) => setTimeout(r))
+      await new Promise((r) => setTimeout(r))
+      expect(root.innerHTML).toBe('<div>Error</div>')
+      expect(called).toBe(2)
+    })
+
     it('multiple setState at once', async () => {
       let called = 0
       const App = () => {
@@ -185,6 +259,7 @@ describe('Hooks', () => {
       expect(called).toBe(2)
       await new Promise((r) => setTimeout(r))
       await new Promise((r) => setTimeout(r))
+      await new Promise((r) => setTimeout(r))
       expect(root.innerHTML).toBe('<div><button>3</button></div>')
       expect(called).toBe(3)
     })
@@ -223,6 +298,7 @@ describe('Hooks', () => {
       expect(called).toBe(2)
       await new Promise((r) => setTimeout(r))
       await new Promise((r) => setTimeout(r))
+      await new Promise((r) => setTimeout(r))
       expect(root.innerHTML).toBe('<div><button>3</button></div>')
       expect(called).toBe(3) // + isPending=true + isPending=false
     })
@@ -263,8 +339,57 @@ describe('Hooks', () => {
       await Promise.resolve()
       expect(root.innerHTML).toBe('<div><button>+1</button></div><div>0</div>')
       await new Promise((r) => setTimeout(r))
+      expect(root.innerHTML).toBe('<div><button>+1</button></div><div>0</div>')
+      await new Promise((r) => setTimeout(r))
+      expect(root.innerHTML).toBe('<div><button>+1</button></div><div>0</div>')
+      await new Promise((r) => setTimeout(r))
+      expect(root.innerHTML).toBe('<div><button>+1</button></div><div>0</div>')
+      await new Promise((r) => setTimeout(r))
       expect(root.innerHTML).toBe('<div><button>+1</button></div><div>2</div>')
     })
+
+    it('initial value', async () => {
+      const promiseMap = {} as Record<number, Promise<number>>
+      const getPromise = (count: number) => {
+        return (promiseMap[count] ||= new Promise((r) => setTimeout(() => r(count + 1))))
+      }
+      const ShowCount = ({ count }: { count: number }) => {
+        if (count === 0 || count === 99) {
+          return <div>{count}</div>
+        }
+
+        const c = use(getPromise(count))
+        return <div>{c}</div>
+      }
+
+      const App = () => {
+        const [count, setCount] = useState(1)
+        const c = useDeferredValue(count, 99)
+        return (
+          <>
+            <div>
+              <button onClick={() => setCount((c) => c + 1)}>+1</button>
+            </div>
+            <Suspense fallback={<div>Loading...</div>}>
+              <ShowCount count={c} />
+            </Suspense>
+          </>
+        )
+      }
+      render(<App />, root)
+      expect(root.innerHTML).toBe('<div><button>+1</button></div><div>99</div>')
+      await new Promise((r) => setTimeout(r))
+      await new Promise((r) => setTimeout(r))
+      await new Promise((r) => setTimeout(r))
+      await new Promise((r) => setTimeout(r))
+      expect(root.innerHTML).toBe('<div><button>+1</button></div><div>2</div>')
+      root.querySelector('button')?.click()
+      await new Promise((r) => setTimeout(r))
+      await new Promise((r) => setTimeout(r))
+      await new Promise((r) => setTimeout(r))
+      await new Promise((r) => setTimeout(r))
+      expect(root.innerHTML).toBe('<div><button>+1</button></div><div>3</div>')
+    })
   })
 
   describe('startViewTransition()', () => {
diff --git a/src/jsx/hooks/index.ts b/src/jsx/hooks/index.ts
index e96b7a41b..4f6b97ef4 100644
--- a/src/jsx/hooks/index.ts
+++ b/src/jsx/hooks/index.ts
@@ -1,6 +1,6 @@
 import type { JSX } from '../base'
 import { DOM_STASH } from '../constants'
-import { build, buildDataStack, update } from '../dom/render'
+import { buildDataStack, update } from '../dom/render'
 import type { Context, Node, NodeObject, PendingType, UpdateHook } from '../dom/render'
 
 type UpdateStateFunction<T> = (newState: T | ((currentState: T) => T)) => void
@@ -8,9 +8,8 @@ type UpdateStateFunction<T> = (newState: T | ((currentState: T) => T)) => void
 const STASH_SATE = 0
 export const STASH_EFFECT = 1
 const STASH_CALLBACK = 2
-const STASH_USE = 3
-const STASH_MEMO = 4
-const STASH_REF = 5
+const STASH_MEMO = 3
+const STASH_REF = 4
 
 export type EffectData = [
   readonly unknown[] | undefined, // deps
@@ -99,11 +98,19 @@ export const useViewTransition = (): [boolean, (callback: () => void) => void] =
   return [!!viewTransitionState?.[0], startViewTransition]
 }
 
-const pendingStack: PendingType[] = []
+// PendingType is defined in "../dom/render", 3 is used for useDeferredValue
+const pendingStack: [PendingType | 3, Promise<void>][] = []
 const runCallback = (type: PendingType, callback: Function): void => {
-  pendingStack.push(type)
+  let resolve: (() => void) | undefined
+  const promise = new Promise<void>((r) => (resolve = r))
+  pendingStack.push([type, promise])
   try {
-    callback()
+    const res = callback()
+    if (res instanceof Promise) {
+      res.then(resolve, resolve)
+    } else {
+      resolve!()
+    }
   } finally {
     pendingStack.pop()
   }
@@ -112,35 +119,60 @@ const runCallback = (type: PendingType, callback: Function): void => {
 export const startTransition = (callback: () => void): void => {
   runCallback(1, callback)
 }
-const startTransitionHook = (callback: () => void): void => {
+const startTransitionHook = (callback: () => void | Promise<void>): void => {
   runCallback(2, callback)
 }
 
-export const useTransition = (): [boolean, (callback: () => void) => void] => {
+export const useTransition = (): [boolean, (callback: () => void | Promise<void>) => void] => {
   const buildData = buildDataStack.at(-1) as [Context, NodeObject]
   if (!buildData) {
     return [false, () => {}]
   }
+
+  const [error, setError] = useState<[Error]>()
+  const [state, updateState] = useState<boolean>()
+  if (error) {
+    throw error[0]
+  }
+  const startTransitionLocalHook = useCallback<typeof startTransitionHook>(
+    (callback) => {
+      startTransitionHook(() => {
+        updateState((state) => !state)
+        let res = callback()
+        if (res instanceof Promise) {
+          res = res.catch((e) => {
+            setError([e])
+          })
+        }
+        return res
+      })
+    },
+    [state]
+  )
+
   const [context] = buildData
-  return [context[0] === 2, startTransitionHook]
+  return [context[0] === 2, startTransitionLocalHook]
 }
 
-export const useDeferredValue = <T>(value: T): T => {
-  const buildData = buildDataStack.at(-1) as [Context, NodeObject]
-  if (buildData) {
-    buildData[0][0] = 1
+type UseDeferredValue = <T>(value: T, initialValue?: T) => T
+export const useDeferredValue: UseDeferredValue = <T>(value: T, ...rest: [T | undefined]): T => {
+  const [values, setValues] = useState<[T, T]>(
+    (rest.length ? [rest[0], rest[0]] : [value, value]) as [T, T]
+  )
+  if (Object.is(values[1], value)) {
+    return values[1]
   }
-  return value
-}
 
-const setShadow = (node: Node) => {
-  if (node.vC) {
-    node.s = node.vC
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    ;(node as any).vC = undefined
+  pendingStack.push([3, Promise.resolve()])
+  updateHook = async (context: Context, _, cb: (context: Context) => void) => {
+    cb(context)
+    values[0] = value
   }
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  ;(node as any).s?.forEach(setShadow)
+  setValues([values[0], value])
+  updateHook = undefined
+  pendingStack.pop()
+
+  return values[0]
 }
 
 type UseStateType = {
@@ -174,9 +206,17 @@ export const useState: UseStateType = <T>(
       if (!Object.is(newState, stateData[0])) {
         stateData[0] = newState
         if (pendingStack.length) {
-          const pendingType = pendingStack.at(-1) as PendingType
-          update([pendingType, false, localUpdateHook as UpdateHook], node).then((node) => {
-            if (!node || pendingType !== 2) {
+          const [pendingType, pendingPromise] = pendingStack.at(-1) as [
+            PendingType | 3,
+            Promise<void>
+          ]
+          Promise.all([
+            pendingType === 3
+              ? node
+              : update([pendingType, false, localUpdateHook as UpdateHook], node),
+            pendingPromise,
+          ]).then(([node]) => {
+            if (!node || !(pendingType === 2 || pendingType === 3)) {
               return
             }
 
@@ -184,29 +224,15 @@ export const useState: UseStateType = <T>(
 
             const addUpdateTask = () => {
               setTimeout(() => {
-                // `node` is not rerendered after current transition
+                // return if `node` is rerendered after current transition
                 if (lastVC !== node.vC) {
                   return
                 }
-
-                const shadowNode = Object.assign({}, node) as NodeObject
-
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                ;(shadowNode as any).vC = undefined // delete the prev build data and build with clean state
-                build([], shadowNode, undefined)
-                setShadow(shadowNode) // save the `shadowNode.vC` of the virtual DOM of the build result as a result of shadow virtual DOM `shadowNode.s`
-
-                node.s = shadowNode.s
-                update([0, false, localUpdateHook as UpdateHook], node)
+                update([pendingType === 3 ? 1 : 0, false, localUpdateHook as UpdateHook], node)
               })
             }
 
-            if (localUpdateHook) {
-              // wait for next animation frame, then invoke `update()`
-              requestAnimationFrame(addUpdateTask)
-            } else {
-              addUpdateTask()
-            }
+            requestAnimationFrame(addUpdateTask)
           })
         } else {
           update([0, false, localUpdateHook as UpdateHook], node)
@@ -315,32 +341,6 @@ export const use = <T>(promise: Promise<T>): T => {
     (e) => resolvedPromiseValueMap.set(promise, [undefined, e])
   )
 
-  const buildData = buildDataStack.at(-1) as [unknown, NodeObject]
-  if (!buildData) {
-    throw promise
-  }
-  const [, node] = buildData
-
-  const promiseArray = (node[DOM_STASH][1][STASH_USE] ||= [])
-  const hookIndex = node[DOM_STASH][0]++
-
-  promise.then(
-    (res) => {
-      promiseArray[hookIndex] = [res]
-    },
-    (e) => {
-      promiseArray[hookIndex] = [undefined, e]
-    }
-  )
-
-  const res = promiseArray[hookIndex]
-  if (res) {
-    if (res.length === 2) {
-      throw res[1]
-    }
-    return res[0] as T
-  }
-
   throw promise
 }
 
diff --git a/src/jsx/index.test.tsx b/src/jsx/index.test.tsx
index 7edf3d9c6..89d9284da 100644
--- a/src/jsx/index.test.tsx
+++ b/src/jsx/index.test.tsx
@@ -618,6 +618,17 @@ describe('Context', () => {
     })
   })
 
+  describe('<Context> as a provider ', () => {
+    it('has a child', () => {
+      const template = (
+        <ThemeContext value='dark'>
+          <Consumer />
+        </ThemeContext>
+      )
+      expect(template.toString()).toBe('<span>dark</span>')
+    })
+  })
+
   it('default value', () => {
     const template = <Consumer />
     expect(template.toString()).toBe('<span>light</span>')
@@ -777,6 +788,8 @@ describe('default export', () => {
     'useMemo',
     'useLayoutEffect',
     'useInsertionEffect',
+    'useActionState',
+    'useOptimistic',
     'Suspense',
     'StrictMode',
   ].forEach((key) => {
diff --git a/src/jsx/index.ts b/src/jsx/index.ts
index cfd95ceda..2fb1041c7 100644
--- a/src/jsx/index.ts
+++ b/src/jsx/index.ts
@@ -30,6 +30,7 @@ import {
   useTransition,
   useViewTransition,
 } from './hooks'
+import { useActionState, useOptimistic } from './dom/hooks'
 import { Suspense } from './streaming'
 
 export {
@@ -64,6 +65,8 @@ export {
   forwardRef,
   useImperativeHandle,
   useSyncExternalStore,
+  useActionState,
+  useOptimistic,
   Suspense,
   Children,
   DOMAttributes,
@@ -100,6 +103,8 @@ export default {
   forwardRef,
   useImperativeHandle,
   useSyncExternalStore,
+  useActionState,
+  useOptimistic,
   Suspense,
   Children,
 }
diff --git a/src/jsx/intrinsic-element/common.ts b/src/jsx/intrinsic-element/common.ts
new file mode 100644
index 000000000..8c066ddbe
--- /dev/null
+++ b/src/jsx/intrinsic-element/common.ts
@@ -0,0 +1,11 @@
+export const deDupeKeyMap: Record<string, string[]> = {
+  title: [],
+  script: ['src'],
+  style: ['data-href'],
+  link: ['href'],
+  meta: ['name', 'httpEquiv', 'charset', 'itemProp'],
+}
+
+export const domRenderers: Record<string, Function> = {}
+
+export const dataPrecedenceAttr = 'data-precedence'
diff --git a/src/jsx/intrinsic-element/components.test.tsx b/src/jsx/intrinsic-element/components.test.tsx
new file mode 100644
index 000000000..a56933005
--- /dev/null
+++ b/src/jsx/intrinsic-element/components.test.tsx
@@ -0,0 +1,399 @@
+/** @jsxImportSource ../ */
+import { useActionState } from '../'
+
+describe('intrinsic element', () => {
+  describe('document metadata', () => {
+    describe('title element', () => {
+      it('should be hoisted title tag', async () => {
+        const template = (
+          <html>
+            <head></head>
+            <body>
+              <title>Hello</title>
+              <h1>World</h1>
+            </body>
+          </html>
+        )
+        expect(template.toString()).toBe(
+          '<html><head><title>Hello</title></head><body><h1>World</h1></body></html>'
+        )
+      })
+    })
+
+    describe('link element', () => {
+      it('should be hoisted link tag', async () => {
+        const template = (
+          <html>
+            <head></head>
+            <body>
+              <link rel='stylesheet' href='style.css' precedence='default' />
+              <h1>World</h1>
+            </body>
+          </html>
+        )
+        expect(template.toString()).toBe(
+          '<html><head><link rel="stylesheet" href="style.css" data-precedence="default"/></head><body><h1>World</h1></body></html>'
+        )
+      })
+
+      it('should be ordered by precedence attribute', () => {
+        const template = (
+          <html>
+            <head></head>
+            <body>
+              <link rel='stylesheet' href='style1.css' precedence='default' />
+              <link rel='stylesheet' href='style2.css' precedence='high' />
+              <link rel='stylesheet' href='style3.css' precedence='default' />
+              <h1>World</h1>
+            </body>
+          </html>
+        )
+        expect(template.toString()).toBe(
+          '<html><head><link rel="stylesheet" href="style1.css" data-precedence="default"/><link rel="stylesheet" href="style3.css" data-precedence="default"/><link rel="stylesheet" href="style2.css" data-precedence="high"/></head><body><h1>World</h1></body></html>'
+        )
+      })
+
+      it('should be de-duped by href', () => {
+        const template = (
+          <html>
+            <head></head>
+            <body>
+              <link rel='stylesheet' href='style1.css' precedence='default' />
+              <link rel='stylesheet' href='style2.css' precedence='high' />
+              <link rel='stylesheet' href='style1.css' precedence='default' />
+              <h1>World</h1>
+            </body>
+          </html>
+        )
+        expect(template.toString()).toBe(
+          '<html><head><link rel="stylesheet" href="style1.css" data-precedence="default"/><link rel="stylesheet" href="style2.css" data-precedence="high"/></head><body><h1>World</h1></body></html>'
+        )
+      })
+
+      it('should be inserted as is if <head> is not present', () => {
+        const template = (
+          <html>
+            <body>
+              <link rel='stylesheet' href='style1.css' precedence='default' />
+              <link rel='stylesheet' href='style2.css' precedence='high' />
+              <h1>World</h1>
+            </body>
+          </html>
+        )
+        expect(template.toString()).toBe(
+          '<html><body><link rel="stylesheet" href="style1.css" data-precedence="default"/><link rel="stylesheet" href="style2.css" data-precedence="high"/><h1>World</h1></body></html>'
+        )
+      })
+
+      it('should not do special behavior if disabled is present', () => {
+        const template = (
+          <html>
+            <head></head>
+            <body>
+              <link rel='stylesheet' href='style1.css' precedence='default' />
+              <link rel='stylesheet' href='style2.css' precedence='default' disabled />
+              <h1>World</h1>
+            </body>
+          </html>
+        )
+        expect(template.toString()).toBe(
+          '<html><head><link rel="stylesheet" href="style1.css" data-precedence="default"/></head><body><link rel="stylesheet" href="style2.css" precedence="default" disabled=""/><h1>World</h1></body></html>'
+        )
+      })
+
+      it('should not be hoisted if has no precedence attribute', () => {
+        const template = (
+          <html>
+            <head></head>
+            <body>
+              <link rel='stylesheet' href='style1.css' />
+              <h1>World</h1>
+            </body>
+          </html>
+        )
+        expect(template.toString()).toBe(
+          '<html><head></head><body><link rel="stylesheet" href="style1.css"/><h1>World</h1></body></html>'
+        )
+      })
+    })
+
+    describe('meta element', () => {
+      it('should be hoisted meta tag', async () => {
+        const template = (
+          <html>
+            <head></head>
+            <body>
+              <meta name='description' content='Hello' />
+              <h1>World</h1>
+            </body>
+          </html>
+        )
+        expect(template.toString()).toBe(
+          '<html><head><meta name="description" content="Hello"/></head><body><h1>World</h1></body></html>'
+        )
+      })
+
+      it('should be de-duped by name', () => {
+        const template = (
+          <html>
+            <head></head>
+            <body>
+              <meta name='description' content='Hello' />
+              <meta name='description' content='World' />
+              <h1>World</h1>
+            </body>
+          </html>
+        )
+        expect(template.toString()).toBe(
+          '<html><head><meta name="description" content="Hello"/></head><body><h1>World</h1></body></html>'
+        )
+      })
+
+      it('should not do special behavior if itemProp is present', () => {
+        const template = (
+          <html>
+            <head></head>
+            <body>
+              <meta name='description' content='Hello' itemProp='test' />
+              <h1>World</h1>
+            </body>
+          </html>
+        )
+        expect(template.toString()).toBe(
+          '<html><head></head><body><meta name="description" content="Hello" itemprop="test"/><h1>World</h1></body></html>'
+        )
+      })
+    })
+
+    describe('script element', () => {
+      it('should be hoisted script tag', async () => {
+        const template = (
+          <html>
+            <head></head>
+            <body>
+              <script src='script.js' async={true} />
+              <h1>World</h1>
+            </body>
+          </html>
+        )
+        expect(template.toString()).toBe(
+          '<html><head><script src="script.js" async=""></script></head><body><h1>World</h1></body></html>'
+        )
+      })
+
+      it('should be de-duped by href with async={true}', () => {
+        const template = (
+          <html>
+            <head></head>
+            <body>
+              <script src='script.js' async />
+              <script src='script.js' async />
+              <h1>World</h1>
+            </body>
+          </html>
+        )
+        expect(template.toString()).toBe(
+          '<html><head><script src="script.js" async=""></script></head><body><h1>World</h1></body></html>'
+        )
+      })
+
+      it('should be omitted "blocking", "onLoad" and "onError" props', () => {
+        const template = (
+          <html>
+            <head></head>
+            <body>
+              <script
+                src='script.js'
+                async={true}
+                onLoad={() => {}}
+                onError={() => {}}
+                blocking='render'
+              />
+              <h1>World</h1>
+            </body>
+          </html>
+        )
+        expect(template.toString()).toBe(
+          '<html><head><script src="script.js" async=""></script></head><body><h1>World</h1></body></html>'
+        )
+      })
+
+      it('should not do special behavior if async is not present', () => {
+        const template = (
+          <html>
+            <head></head>
+            <body>
+              <script src='script.js' />
+              <h1>World</h1>
+            </body>
+          </html>
+        )
+        expect(template.toString()).toBe(
+          '<html><head></head><body><script src="script.js"></script><h1>World</h1></body></html>'
+        )
+      })
+    })
+
+    describe('style element', () => {
+      it('should be hoisted style tag', async () => {
+        const template = (
+          <html>
+            <head></head>
+            <body>
+              <style href='red' precedence='default'>
+                {'body { color: red; }'}
+              </style>
+              <h1>World</h1>
+            </body>
+          </html>
+        )
+        expect(template.toString()).toBe(
+          '<html><head><style data-href="red" data-precedence="default">body { color: red; }</style></head><body><h1>World</h1></body></html>'
+        )
+      })
+
+      it('should be sorted by precedence attribute', async () => {
+        const template = (
+          <html>
+            <head></head>
+            <body>
+              <style href='red' precedence='default'>
+                {'body { color: red; }'}
+              </style>
+              <style href='green' precedence='high'>
+                {'body { color: green; }'}
+              </style>
+              <style href='blue' precedence='default'>
+                {'body { color: blue; }'}
+              </style>
+              <h1>World</h1>
+            </body>
+          </html>
+        )
+        expect(template.toString()).toBe(
+          '<html><head><style data-href="red" data-precedence="default">body { color: red; }</style><style data-href="blue" data-precedence="default">body { color: blue; }</style><style data-href="green" data-precedence="high">body { color: green; }</style></head><body><h1>World</h1></body></html>'
+        )
+      })
+
+      it('should not be hoisted if href is not present', () => {
+        const template = (
+          <html>
+            <head></head>
+            <body>
+              <style>{'body { color: red; }'}</style>
+              <h1>World</h1>
+            </body>
+          </html>
+        )
+        expect(template.toString()).toBe(
+          '<html><head></head><body><style>body { color: red; }</style><h1>World</h1></body></html>'
+        )
+      })
+    })
+  })
+
+  describe('form element', () => {
+    it('should be omitted "action" prop if it is a function', () => {
+      const template = (
+        <html>
+          <head></head>
+          <body>
+            <form action={() => {}} method='get'>
+              <input type='text' />
+            </form>
+          </body>
+        </html>
+      )
+      expect(template.toString()).toBe(
+        '<html><head></head><body><form method="get"><input type="text"/></form></body></html>'
+      )
+    })
+
+    it('should be rendered permalink', () => {
+      const [, action] = useActionState(() => {}, {}, 'permalink')
+      const template = (
+        <html>
+          <head></head>
+          <body>
+            <form action={action} method='get'>
+              <input type='text' />
+            </form>
+          </body>
+        </html>
+      )
+      expect(template.toString()).toBe(
+        '<html><head></head><body><form action="permalink" method="get"><input type="text"/></form></body></html>'
+      )
+    })
+
+    it('should not do special behavior if action is a string', () => {
+      const template = (
+        <html>
+          <head></head>
+          <body>
+            <form action='/entries' method='get'>
+              <input type='text' />
+            </form>
+          </body>
+        </html>
+      )
+      expect(template.toString()).toBe(
+        '<html><head></head><body><form action="/entries" method="get"><input type="text"/></form></body></html>'
+      )
+    })
+
+    it('should not do special behavior if no action prop', () => {
+      const template = (
+        <html>
+          <head></head>
+          <body>
+            <form>
+              <input type='text' />
+            </form>
+          </body>
+        </html>
+      )
+      expect(template.toString()).toBe(
+        '<html><head></head><body><form><input type="text"/></form></body></html>'
+      )
+    })
+
+    describe('input element', () => {
+      it('should be rendered as is', () => {
+        const template = <input type='text' />
+        expect(template.toString()).toBe('<input type="text"/>')
+      })
+
+      it('should be omitted "formAction" prop if it is a function', () => {
+        const template = (
+          <html>
+            <head></head>
+            <body>
+              <input type='text' formAction={() => {}} />
+            </body>
+          </html>
+        )
+        expect(template.toString()).toBe(
+          '<html><head></head><body><input type="text"/></body></html>'
+        )
+      })
+
+      it('should be rendered permalink', () => {
+        const [, formAction] = useActionState(() => {}, {}, 'permalink')
+        const template = (
+          <html>
+            <head></head>
+            <body>
+              <input type='text' formAction={formAction} />
+            </body>
+          </html>
+        )
+        expect(template.toString()).toBe(
+          '<html><head></head><body><input type="text" formaction="permalink"/></body></html>'
+        )
+      })
+    })
+  })
+})
+
+export {}
diff --git a/src/jsx/intrinsic-element/components.ts b/src/jsx/intrinsic-element/components.ts
new file mode 100644
index 000000000..0180d5421
--- /dev/null
+++ b/src/jsx/intrinsic-element/components.ts
@@ -0,0 +1,172 @@
+import type { HtmlEscapedCallback, HtmlEscapedString } from '../../utils/html'
+import { JSXNode } from '../base'
+import type { Child, Props } from '../base'
+import type { FC, PropsWithChildren } from '../types'
+import { raw } from '../../helper/html'
+import { dataPrecedenceAttr, deDupeKeyMap } from './common'
+import { PERMALINK } from '../constants'
+import { toArray } from '../children'
+import type { IntrinsicElements } from '../intrinsic-elements'
+
+const metaTagMap: WeakMap<
+  object,
+  Record<string, [string, Props, string | undefined][]>
+> = new WeakMap()
+const insertIntoHead: (
+  tagName: string,
+  tag: string,
+  props: Props,
+  precedence: string | undefined
+) => HtmlEscapedCallback =
+  (tagName, tag, props, precedence) =>
+  ({ buffer, context }): undefined => {
+    if (!buffer) {
+      return
+    }
+    const map = metaTagMap.get(context) || {}
+    metaTagMap.set(context, map)
+    const tags = (map[tagName] ||= [])
+
+    let duped = false
+    const deDupeKeys = deDupeKeyMap[tagName]
+    if (deDupeKeys.length > 0) {
+      LOOP: for (const [, tagProps] of tags) {
+        for (const key of deDupeKeys) {
+          if ((tagProps?.[key] ?? null) === props?.[key]) {
+            duped = true
+            break LOOP
+          }
+        }
+      }
+    }
+
+    if (duped) {
+      buffer[0] = buffer[0].replaceAll(tag, '')
+    } else if (deDupeKeys.length > 0) {
+      tags.push([tag, props, precedence])
+    } else {
+      tags.unshift([tag, props, precedence])
+    }
+
+    if (buffer[0].indexOf('</head>') !== -1) {
+      let insertTags
+      if (precedence === undefined) {
+        insertTags = tags.map(([tag]) => tag)
+      } else {
+        const precedences: string[] = []
+        insertTags = tags
+          .map(([tag, , precedence]) => {
+            let order = precedences.indexOf(precedence as string)
+            if (order === -1) {
+              precedences.push(precedence as string)
+              order = precedences.length - 1
+            }
+            return [tag, order] as [string, number]
+          })
+          .sort((a, b) => a[1] - b[1])
+          .map(([tag]) => tag)
+      }
+
+      insertTags.forEach((tag) => {
+        buffer[0] = buffer[0].replaceAll(tag, '')
+      })
+      buffer[0] = buffer[0].replace(/(?=<\/head>)/, insertTags.join(''))
+    }
+  }
+
+const returnWithoutSpecialBehavior = (tag: string, children: Child, props: Props) =>
+  raw(new JSXNode(tag, props, toArray(children ?? [])).toString())
+
+const documentMetadataTag = (tag: string, children: Child, props: Props, sort: boolean) => {
+  if ('itemProp' in props) {
+    return returnWithoutSpecialBehavior(tag, children, props)
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  let { precedence, blocking, ...restProps } = props
+  precedence = sort ? precedence ?? '' : undefined
+  if (sort) {
+    restProps[dataPrecedenceAttr] = precedence
+  }
+
+  const string = new JSXNode(tag, restProps, toArray(children || [])).toString()
+
+  if (string instanceof Promise) {
+    return string.then((resString) =>
+      raw(string, [
+        ...((resString as HtmlEscapedString).callbacks || []),
+        insertIntoHead(tag, resString, restProps, precedence),
+      ])
+    )
+  } else {
+    return raw(string, [insertIntoHead(tag, string, restProps, precedence)])
+  }
+}
+
+export const title: FC<PropsWithChildren> = ({ children, ...props }) => {
+  return documentMetadataTag('title', children, props, false)
+}
+export const script: FC<PropsWithChildren<IntrinsicElements['script']>> = ({
+  children,
+  ...props
+}) => {
+  if (['src', 'async'].some((k) => !props[k])) {
+    return returnWithoutSpecialBehavior('script', children, props)
+  }
+
+  return documentMetadataTag('script', children, props, false)
+}
+
+export const style: FC<PropsWithChildren<IntrinsicElements['style']>> = ({
+  children,
+  ...props
+}) => {
+  if (!['href', 'precedence'].every((k) => k in props)) {
+    return returnWithoutSpecialBehavior('style', children, props)
+  }
+  props['data-href'] = props.href
+  delete props.href
+  return documentMetadataTag('style', children, props, true)
+}
+export const link: FC<PropsWithChildren<IntrinsicElements['link']>> = ({ children, ...props }) => {
+  if (
+    ['onLoad', 'onError'].some((k) => k in props) ||
+    (props.rel === 'stylesheet' && (!('precedence' in props) || 'disabled' in props))
+  ) {
+    return returnWithoutSpecialBehavior('link', children, props)
+  }
+  return documentMetadataTag('link', children, props, 'precedence' in props)
+}
+export const meta: FC<PropsWithChildren> = ({ children, ...props }) => {
+  return documentMetadataTag('meta', children, props, false)
+}
+
+const newJSXNode = (tag: string, { children, ...props }: PropsWithChildren<unknown>) =>
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  new JSXNode(tag, props, toArray(children ?? []) as Child[]) as any
+export const form: FC<
+  PropsWithChildren<{
+    action?: Function | string
+    method?: 'get' | 'post'
+  }>
+> = (props) => {
+  if (typeof props.action === 'function') {
+    props.action = PERMALINK in props.action ? (props.action[PERMALINK] as string) : undefined
+  }
+  return newJSXNode('form', props)
+}
+
+const formActionableElement = (
+  tag: string,
+  props: PropsWithChildren<{
+    formAction?: Function | string
+  }>
+) => {
+  if (typeof props.formAction === 'function') {
+    props.formAction =
+      PERMALINK in props.formAction ? (props.formAction[PERMALINK] as string) : undefined
+  }
+  return newJSXNode(tag, props)
+}
+export const input = (props: PropsWithChildren) => formActionableElement('input', props)
+export const button = (props: PropsWithChildren) => formActionableElement('button', props)
diff --git a/src/jsx/intrinsic-elements.ts b/src/jsx/intrinsic-elements.ts
index 7f0bd12a3..5da00b0f7 100644
--- a/src/jsx/intrinsic-elements.ts
+++ b/src/jsx/intrinsic-elements.ts
@@ -163,6 +163,7 @@ export namespace JSX {
     tabindex?: number | undefined
     title?: string | undefined
     translate?: 'yes' | 'no' | undefined
+    itemProp?: string | undefined
   }
 
   type HTMLAttributeReferrerPolicy =
@@ -222,6 +223,9 @@ export namespace JSX {
     name?: string | undefined
     type?: 'submit' | 'reset' | 'button' | undefined
     value?: string | ReadonlyArray<string> | number | undefined
+
+    // React 19 compatibility
+    formAction?: string | Function | undefined
   }
 
   interface CanvasHTMLAttributes extends HTMLAttributes {
@@ -276,6 +280,9 @@ export namespace JSX {
     name?: string | undefined
     novalidate?: boolean | undefined
     target?: string | undefined
+
+    // React 19 compatibility
+    action?: string | Function | undefined
   }
 
   interface HtmlHTMLAttributes extends HTMLAttributes {
@@ -371,6 +378,9 @@ export namespace JSX {
     type?: HTMLInputTypeAttribute | undefined
     value?: string | ReadonlyArray<string> | number | undefined
     width?: number | string | undefined
+
+    // React 19 compatibility
+    formAction?: string | Function | undefined
   }
 
   interface KeygenHTMLAttributes extends HTMLAttributes {
@@ -403,6 +413,15 @@ export namespace JSX {
     sizes?: string | undefined
     type?: string | undefined
     charSet?: string | undefined
+
+    // React 19 compatibility
+    rel?: string | undefined
+    precedence?: string | undefined
+    title?: string | undefined
+    disabled?: boolean | undefined
+    onError?: ((event: Event) => void) | undefined
+    onLoad?: ((event: Event) => void) | undefined
+    blocking?: 'render' | undefined
   }
 
   interface MapHTMLAttributes extends HTMLAttributes {
@@ -432,6 +451,9 @@ export namespace JSX {
     name?: string | undefined
     media?: string | undefined
     content?: string | undefined
+
+    // React 19 compatibility
+    httpEquiv?: string | undefined
   }
 
   interface MeterHTMLAttributes extends HTMLAttributes {
@@ -505,6 +527,15 @@ export namespace JSX {
     referrerpolicy?: HTMLAttributeReferrerPolicy | undefined
     src?: string | undefined
     type?: string | undefined
+
+    // React 19 compatibility
+    crossOrigin?: CrossOrigin
+    fetchPriority?: string | undefined
+    noModule?: boolean | undefined
+    referrer?: HTMLAttributeReferrerPolicy | undefined
+    onError?: ((event: Event) => void) | undefined
+    onLoad?: ((event: Event) => void) | undefined
+    blocking?: 'render' | undefined
   }
 
   interface SelectHTMLAttributes extends HTMLAttributes {
@@ -532,6 +563,13 @@ export namespace JSX {
     media?: string | undefined
     scoped?: boolean | undefined
     type?: string | undefined
+
+    // React 19 compatibility
+    href?: string | undefined
+    precedence?: string | undefined
+    title?: string | undefined
+    disabled?: boolean | undefined
+    blocking?: 'render' | undefined
   }
 
   interface TableHTMLAttributes extends HTMLAttributes {
diff --git a/src/jsx/streaming.test.tsx b/src/jsx/streaming.test.tsx
index f63c5c810..f8802bccd 100644
--- a/src/jsx/streaming.test.tsx
+++ b/src/jsx/streaming.test.tsx
@@ -745,8 +745,8 @@ d.replaceWith(c.content)
 
   describe('use()', async () => {
     it('render to string', async () => {
+      const promise = new Promise((resolve) => setTimeout(() => resolve('Hello from use()'), 0))
       const Content = () => {
-        const promise = new Promise((resolve) => setTimeout(() => resolve('Hello from use()'), 0))
         const message = use(promise)
         return <h1>{message}</h1>
       }
@@ -765,8 +765,8 @@ d.replaceWith(c.content)
     })
 
     it('render to stream', async () => {
+      const promise = new Promise((resolve) => setTimeout(() => resolve('Hello from use()'), 0))
       const Content = () => {
-        const promise = new Promise((resolve) => setTimeout(() => resolve('Hello from use()'), 0))
         const message = use(promise)
         return <h1>{message}</h1>
       }
diff --git a/src/jsx/utils.test.ts b/src/jsx/utils.test.ts
index 5d78e009b..4045ba976 100644
--- a/src/jsx/utils.test.ts
+++ b/src/jsx/utils.test.ts
@@ -2,10 +2,16 @@ import { normalizeIntrinsicElementKey, styleObjectForEach } from './utils'
 
 describe('normalizeIntrinsicElementKey', () => {
   test.each`
-    key            | expected
-    ${'className'} | ${'class'}
-    ${'htmlFor'}   | ${'for'}
-    ${'href'}      | ${'href'}
+    key                | expected
+    ${'className'}     | ${'class'}
+    ${'htmlFor'}       | ${'for'}
+    ${'crossOrigin'}   | ${'crossorigin'}
+    ${'httpEquiv'}     | ${'http-equiv'}
+    ${'itemProp'}      | ${'itemprop'}
+    ${'fetchPriority'} | ${'fetchpriority'}
+    ${'noModule'}      | ${'nomodule'}
+    ${'formAction'}    | ${'formaction'}
+    ${'href'}          | ${'href'}
   `('should convert $key to $expected', ({ key, expected }) => {
     expect(normalizeIntrinsicElementKey(key)).toBe(expected)
   })
diff --git a/src/jsx/utils.ts b/src/jsx/utils.ts
index 331a280bd..c5e875fc1 100644
--- a/src/jsx/utils.ts
+++ b/src/jsx/utils.ts
@@ -1,6 +1,12 @@
 const normalizeElementKeyMap = new Map([
   ['className', 'class'],
   ['htmlFor', 'for'],
+  ['crossOrigin', 'crossorigin'],
+  ['httpEquiv', 'http-equiv'],
+  ['itemProp', 'itemprop'],
+  ['fetchPriority', 'fetchpriority'],
+  ['noModule', 'nomodule'],
+  ['formAction', 'formaction'],
 ])
 export const normalizeIntrinsicElementKey = (key: string): string =>
   normalizeElementKeyMap.get(key) || key
diff --git a/src/utils/html.ts b/src/utils/html.ts
index 385060cc2..435828a40 100644
--- a/src/utils/html.ts
+++ b/src/utils/html.ts
@@ -35,6 +35,7 @@ export type HtmlEscapedString = string & HtmlEscaped
  * ]
  */
 export type StringBuffer = (string | Promise<string>)[]
+export type StringBufferWithCallbacks = StringBuffer & { callbacks: HtmlEscapedCallback[] }
 
 export const raw = (value: unknown, callbacks?: HtmlEscapedCallback[]): HtmlEscapedString => {
   const escapedString = new String(value) as HtmlEscapedString
@@ -49,9 +50,12 @@ export const raw = (value: unknown, callbacks?: HtmlEscapedCallback[]): HtmlEsca
 
 const escapeRe = /[&<>'"]/
 
-export const stringBufferToString = async (buffer: StringBuffer): Promise<HtmlEscapedString> => {
+export const stringBufferToString = async (
+  buffer: StringBuffer,
+  callbacks: HtmlEscapedCallback[] | undefined
+): Promise<HtmlEscapedString> => {
   let str = ''
-  const callbacks: HtmlEscapedCallback[] = []
+  callbacks ||= []
   for (let i = buffer.length - 1; ; i--) {
     str += buffer[i]
     i--
@@ -121,6 +125,19 @@ export const escapeToBuffer = (str: string, buffer: StringBuffer): void => {
   buffer[0] += str.substring(lastIndex, index)
 }
 
+export const resolveCallbackSync = (str: string | HtmlEscapedString): string => {
+  const callbacks = (str as HtmlEscapedString).callbacks as HtmlEscapedCallback[]
+  if (!callbacks?.length) {
+    return str
+  }
+  const buffer: [string] = [str]
+  const context = {}
+
+  callbacks.forEach((c) => c({ phase: HtmlEscapedCallbackPhase.Stringify, buffer, context }))
+
+  return buffer[0]
+}
+
 export const resolveCallback = async (
   str: string | HtmlEscapedString,
   phase: (typeof HtmlEscapedCallbackPhase)[keyof typeof HtmlEscapedCallbackPhase],