diff --git a/deno_dist/jsx/hooks/index.ts b/deno_dist/jsx/hooks/index.ts index 93e63b22e..59df5e344 100644 --- a/deno_dist/jsx/hooks/index.ts +++ b/deno_dist/jsx/hooks/index.ts @@ -370,8 +370,8 @@ export const createRef = (): RefObject => { } export const forwardRef = ( - Component: (props: P, ref: RefObject) => JSX.Element -): ((props: P & { ref: RefObject }) => JSX.Element) => { + Component: (props: P, ref?: RefObject) => JSX.Element +): ((props: P & { ref?: RefObject }) => JSX.Element) => { return (props) => { const { ref, ...rest } = props return Component(rest as P, ref) diff --git a/src/jsx/hooks/dom.test.tsx b/src/jsx/hooks/dom.test.tsx index a824019a8..7ed3a57c8 100644 --- a/src/jsx/hooks/dom.test.tsx +++ b/src/jsx/hooks/dom.test.tsx @@ -497,6 +497,14 @@ describe('Hooks', () => { expect(root.innerHTML).toBe('
') expect(ref.current).toBeInstanceOf(HTMLElement) }) + + it('can run without ref', () => { + const App = forwardRef((props) => { + return
+ }) + render(, root) + expect(root.innerHTML).toBe('
') + }) }) describe('useImperativeHandle()', () => { diff --git a/src/jsx/hooks/index.ts b/src/jsx/hooks/index.ts index d142d44af..ef51f2c65 100644 --- a/src/jsx/hooks/index.ts +++ b/src/jsx/hooks/index.ts @@ -370,8 +370,8 @@ export const createRef = (): RefObject => { } export const forwardRef = ( - Component: (props: P, ref: RefObject) => JSX.Element -): ((props: P & { ref: RefObject }) => JSX.Element) => { + Component: (props: P, ref?: RefObject) => JSX.Element +): ((props: P & { ref?: RefObject }) => JSX.Element) => { return (props) => { const { ref, ...rest } = props return Component(rest as P, ref)