Typescript RefForwardingComponent not working

Question

I am trying to make my component accept a ref.

I have a component like so:

const MyComponent: RefForwardingCom         


        

Answer 1

RefForwardingComponent is a render function, which receives props and ref parameters and returns a React node - it is no component:

The second ref argument only exists when you define a component with React.forwardRef call. Regular function or class components don’t receive the ref argument, and ref is not available in props either. (docs)

That is also the reason, why RefForwardingComponent is deprecated in favor of ForwardRefRenderFunction, which is functionally equivalent, but has a different name to make the distinction clearer.

You use React.forwardRef to turn the render function into an actual component that accepts refs:

import React, { ForwardRefRenderFunction } from 'react'

type IMyComponentProps = { a: string }
const MyComponentRenderFn: ForwardRefRenderFunction =
    (props, ref) => 
Hoopla

const MyComponent = React.forwardRef(MyComponentRenderFn);
const myRef = React.createRef();