Merge commit from fork

yusukebe · web-flow · commit 0c45036d6b0d · 2026-08-03T11:18:37.000+09:00
diff --git a/src/jsx/base.ts b/src/jsx/base.ts
@@ -384,15 +384,7 @@ export const memo = <T>(
   component: FC<T>,
   propsAreEqual: (prevProps: Readonly<T>, nextProps: Readonly<T>) => boolean = shallowEqual
 ): FC<T> => {
-  let computed: ReturnType<FC<T>> = null
-  let prevProps: T | undefined = undefined
-  const wrapper: MemorableFC<T> = ((props: T) => {
-    if (prevProps && !propsAreEqual(prevProps, props)) {
-      computed = null
-    }
-    prevProps = props
-    return (computed ||= component(props))
-  }) as MemorableFC<T>
+  const wrapper: MemorableFC<T> = ((props: T) => component(props)) as MemorableFC<T>
 
   // This function is for toString(), but it can also be used for DOM renderer.
   // So, set DOM_MEMO and DOM_RENDERER for DOM renderer.
diff --git a/src/jsx/index.test.tsx b/src/jsx/index.test.tsx
@@ -2,6 +2,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { html } from '../helper/html'
 import { Hono } from '../hono'
+import { DOM_MEMO } from './constants'
 import { captureRenderContext } from './context'
 import { Suspense, renderToReadableStream } from './streaming'
 import DefaultExport, {
@@ -742,7 +743,7 @@ describe('className', () => {
 })
 
 describe('memo', () => {
-  it('memoized', () => {
+  it('does not reuse the result of a previous render', () => {
     let counter = 0
     const Header = memo(() => <title>Test Site {counter}</title>)
     const Body = () => <span>{counter}</span>
@@ -773,10 +774,24 @@ describe('memo', () => {
       </html>
     )
     expect(template.toString()).toBe(
-      '<html><head><title>Test Site 0</title></head><body><span>1</span></body></html>'
+      '<html><head><title>Test Site 1</title></head><body><span>1</span></body></html>'
     )
   })
 
+  it('does not carry a context value into a later render', () => {
+    const NameContext = createContext('anonymous')
+    const Panel = memo(() => <p>{useContext(NameContext)}</p>)
+    const render = (name: string) =>
+      (
+        <NameContext.Provider value={name}>
+          <Panel />
+        </NameContext.Provider>
+      ).toString()
+
+    expect(render('alice')).toBe('<p>alice</p>')
+    expect(render('bob')).toBe('<p>bob</p>')
+  })
+
   it('props are updated', () => {
     const Body = memo(({ counter }: { counter: number }) => <span>{counter}</span>)
 
@@ -787,20 +802,15 @@ describe('memo', () => {
     expect(template.toString()).toBe('<span>1</span>')
   })
 
-  it('custom propsAreEqual', () => {
-    const Body = memo(
-      ({ counter }: { counter: number; refresh?: boolean }) => <span>{counter}</span>,
-      (_, nextProps) => (typeof nextProps.refresh == 'undefined' ? true : !nextProps.refresh)
-    )
-
-    let template = <Body counter={0} />
-    expect(template.toString()).toBe('<span>0</span>')
+  it('custom propsAreEqual is handed to the DOM renderer', () => {
+    const propsAreEqual = (_: { counter: number }, nextProps: { counter: number }) =>
+      nextProps.counter === 0
+    const Body = memo(({ counter }: { counter: number }) => <span>{counter}</span>, propsAreEqual)
 
-    template = <Body counter={1} />
-    expect(template.toString()).toBe('<span>0</span>')
+    expect((Body as any)[DOM_MEMO]).toBe(propsAreEqual)
 
-    template = <Body counter={2} refresh={true} />
-    expect(template.toString()).toBe('<span>2</span>')
+    expect((<Body counter={0} />).toString()).toBe('<span>0</span>')
+    expect((<Body counter={1} />).toString()).toBe('<span>1</span>')
   })
 })
 
