I'm writing a React component which can forward ref to its chilren
I found out that for the return type of the function components, I can use ForwardRefExoticComponent and ForwardRefRenderFunction. But I'm not sure whats the difference between them.
So far, When using ForwardRefExoticComponent, I can extend it while the ForwardRefRenderFunction cannot? I posted a question related to my case here : How to export forwardRef with ForwardRefRenderFunction
If anyone know whats the difference between them and what they do please help me. Because it seems that React team has no document about them (but they are inside react package)
React.forwardRef takes a function with props and ref arguments. This function returns a JSX Element. ... The props hold the props of the component and ref holds the ref passed to the component.
The interplay of those two definitions is best seen in the definition of the forwardRef function: Also, a big difference between the two definitions seems to be, that ForwardRefExoticComponent (like all exotic components) are no function components, but actually just objects, which are treated specially when rendering them.
Ref Forwarding is the passing of a ref from a component to one of its children. Ref is a mutable reference to an Object. This can be a DOM instance or a class instance. It is greatest using either the useRef of the createRef APIs. The refs are then assigned to the ref property of a JSX element.
Regular function or class components don’t receive the ref argument, and ref is not available in props either. Ref forwarding is not limited to DOM components. You can forward refs to class component instances, too.
The definition taken from here is
interface ExoticComponent<P = {}> {
/**
* **NOTE**: Exotic components are not callable.
*/
(props: P): (ReactElement|null);
readonly $$typeof: symbol;
}
interface NamedExoticComponent<P = {}> extends ExoticComponent<P> {
displayName?: string;
}
interface ForwardRefExoticComponent<P> extends NamedExoticComponent<P> {
defaultProps?: Partial<P>;
propTypes?: WeakValidationMap<P>;
}
If you write it out you get
interface ForwardRefExoticComponent<P> {
/**
* **NOTE**: Exotic components are not callable.
*/
(props: P): (ReactElement|null);
readonly $$typeof: symbol;
displayName?: string;
defaultProps?: Partial<P>;
propTypes?: WeakValidationMap<P>;
}
The definition taken from here is
interface ForwardRefRenderFunction<T, P = {}> {
(props: PropsWithChildren<P>, ref: ((instance: T | null) => void) | MutableRefObject<T | null> | null): ReactElement | null;
displayName?: string;
// explicit rejected with `never` required due to
// https://github.com/microsoft/TypeScript/issues/36826
/**
* defaultProps are not supported on render functions
*/
defaultProps?: never;
/**
* propTypes are not supported on render functions
*/
propTypes?: never;
}
ForwardRefRenderFunction
does not support propTypes
and defaultProps
, whereas ForwardRefExoticComponent
does.ForwardRefExoticComponent
has an additional member $$typeof
of type symbol
ForwardRefRenderFunction
takes a props
object, which must include a member children
and a ref object as parameters, whereas the call signature of ForwardRefExoticComponent
only takes a props object of arbitrary shape as parameter.The interplay of those two definitions is best seen in the definition of the forwardRef
function:
function forwardRef<T, P = {}>(render: ForwardRefRenderFunction<T, P>): ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>;
Also, a big difference between the two definitions seems to be, that ForwardRefExoticComponent
(like all exotic components) are no function components, but actually just objects, which are treated specially when rendering them. Therefore the comment
NOTE: Exotic components are not callable.
And for some reason, those exotic components are necessary in some places.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With