What's the Difference Between Forwardrefexoticcomponent and Forwardrefrenderfunction in React?

Question

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)

Accepted Answer

Must Read

ForwardRefExoticComponent

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>;
}

What's the Difference Between Forwardrefexoticcomponent and Forwardrefrenderfunction in React?

1 Answer

Must Read

ForwardRefExoticComponent

Sophia Al-Mansoor