React with Typescript -- Generics while using React.forwardRef

Question

I am trying to create a generic component where a user can pass the a custom OptionType to the component to get type checking all the way through. This component also required a React.forwardRef.

I can get it to work without a forwardRef. Any ideas? Code below:

WithoutForwardRef.tsx

export interface Option<OptionValueType = unknown> {
  value: OptionValueType;
  label: string;
}

interface WithoutForwardRefProps<OptionType> {
  onChange: (option: OptionType) => void;
  options: OptionType[];
}

export const WithoutForwardRef = <OptionType extends Option>(
  props: WithoutForwardRefProps<OptionType>,
) => {
  const { options, onChange } = props;
  return (
    <div>
      {options.map((opt) => {
        return (
          <div
            onClick={() => {
              onChange(opt);
            }}
          >
            {opt.label}
          </div>
        );
      })}
    </div>
  );
};

WithForwardRef.tsx

import { Option } from './WithoutForwardRef';

interface WithForwardRefProps<OptionType> {
  onChange: (option: OptionType) => void;
  options: OptionType[];
}

export const WithForwardRef = React.forwardRef(
  <OptionType extends Option>(
    props: WithForwardRefProps<OptionType>,
    ref?: React.Ref<HTMLDivElement>,
  ) => {
    const { options, onChange } = props;
    return (
      <div>
        {options.map((opt) => {
          return (
            <div
              onClick={() => {
                onChange(opt);
              }}
            >
              {opt.label}
            </div>
          );
        })}
      </div>
    );
  },
);

App.tsx

import { WithoutForwardRef, Option } from './WithoutForwardRef';
import { WithForwardRef } from './WithForwardRef';

interface CustomOption extends Option<number> {
  action: (value: number) => void;
}

const App: React.FC = () => {
  return (
    <div>
      <h3>Without Forward Ref</h3>
      <h4>Basic</h4>
      <WithoutForwardRef
        options={[{ value: 'test', label: 'Test' }, { value: 1, label: 'Test Two' }]}
        onChange={(option) => {
          // Does type inference on the type of value in the options
          console.log('BASIC', option);
        }}
      />
      <h4>Custom</h4>
      <WithoutForwardRef<CustomOption>
        options={[
          {
            value: 1,
            label: 'Test',
            action: (value) => {
              console.log('ACTION', value);
            },
          },
        ]}
        onChange={(option) => {
          // Intellisense works here
          option.action(option.value);
        }}
      />
      <h3>With Forward Ref</h3>
      <h4>Basic</h4>
      <WithForwardRef
        options={[{ value: 'test', label: 'Test' }, { value: 1, label: 'Test Two' }]}
        onChange={(option) => {
          // Does type inference on the type of value in the options
          console.log('BASIC', option);
        }}
      />
      <h4>Custom (WitForwardRef is not generic here)</h4>
      <WithForwardRef<CustomOption>
        options={[
          {
            value: 1,
            label: 'Test',
            action: (value) => {
              console.log('ACTION', value);
            },
          },
        ]}
        onChange={(option) => {
          // Intellisense SHOULD works here
          option.action(option.value);
        }}
      />
    </div>
  );
};

In the App.tsx, it says the WithForwardRef component is not generic. Is there a way to achieve this?

Example repo: https://github.com/jgodi/generics-with-forward-ref

Thanks!

Answer 1

Creating a generic component as output of React.forwardRef is not directly possible ¹ (see bottom). There are some alternatives though - let's simplify your example a bit for illustration:

type Option<O = unknown> = { value: O; label: string; }
type Props<T extends Option<unknown>> = { options: T[] }

const options = [
  { value: 1, label: "la1", flag: true }, 
  { value: 2, label: "la2", flag: false }
]

Choose variants (1) or (2) for simplicity. (3) will replace forwardRef by usual props. With (4) you globally chance forwardRef type definitions once in the app.

Playground variants 1, 2, 3

Playground variant 4

1. Use type assertion ("cast")

// Given render function (input) for React.forwardRef
const FRefInputComp = <T extends Option>(p: Props<T>, ref: Ref<HTMLDivElement>) =>
  <div ref={ref}> {p.options.map(o => <p>{o.label}</p>)} </div>

// Cast the output
const FRefOutputComp1 = React.forwardRef(FRefInputComp) as
  <T extends Option>(p: Props<T> & { ref?: Ref<HTMLDivElement> }) => ReactElement

const Usage11 = () => <FRefOutputComp1 options={options} ref={myRef} />
// options has type { value: number; label: string; flag: boolean; }[] 
// , so we have made FRefOutputComp generic!

This works, as the return type of forwardRef in principle is a plain function. We just need a generic function type shape. You might add an extra type to make the assertion simpler:

type ForwardRefFn<R> = <P={}>(p: P & React.RefAttributes<R>) => ReactElement |null
// `RefAttributes` is built-in type with ref and key props defined
const Comp12 = React.forwardRef(FRefInputComp) as ForwardRefFn<HTMLDivElement>
const Usage12 = () => <Comp12 options={options} ref={myRef} />

2. Wrap forwarded component

const FRefOutputComp2 = React.forwardRef(FRefInputComp)
// ↳ T is instantiated with base constraint `Option<unknown>` from FRefInputComp

export const Wrapper = <T extends Option>({myRef, ...rest}: Props<T> & 
  {myRef: React.Ref<HTMLDivElement>}) => <FRefOutputComp2 {...rest} ref={myRef} />

const Usage2 = () => <Wrapper options={options} myRef={myRef} />

3. Omit forwardRef alltogether

Use a custom ref prop instead. This one is my favorite - simplest alternative, a legitimate way in React and doesn't need forwardRef.

const Comp3 = <T extends Option>(props: Props<T> & {myRef: Ref<HTMLDivElement>}) 
  => <div ref={myRef}> {props.options.map(o => <p>{o.label}</p>)} </div>
const Usage3 = () => <Comp3 options={options} myRef={myRef} />

4. Use global type augmentation

Add following code once in your app, perferrably in a separate module react-augment.d.ts:

import React from "react"

declare module "react" {
  function forwardRef<T, P = {}>(
    render: (props: P, ref: ForwardedRef<T>) => ReactElement | null
  ): (props: P & RefAttributes<T>) => ReactElement | null
}

This will augment React module type declarations, overriding forwardRef with a new function overload type signature. Tradeoff: component properties like displayName now need a type assertion.

---

¹ Why does the original case not work?

React.forwardRef has following type:

function forwardRef<T, P = {}>(render: ForwardRefRenderFunction<T, P>): 
  ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>;

So this function takes a generic component-like render function ForwardRefRenderFunction, and returns the final component with type ForwardRefExoticComponent. These two are just function type declarations with additional properties displayName, defaultProps etc.

Now, there is a TypeScript 3.4 feature called higher order function type inference akin to Higher-Rank Types. It basically allows you to propagate free type parameters (generics from the input function) on to the outer, calling function - React.forwardRef here -, so the resulting function component is still generic.

But this feature can only work with plain function types, as Anders Hejlsberg explains in [1], [2]:

We only make higher order function type inferences when the source and target types are both pure function types, i.e. types with a single call signature and no other members.

Above solutions will make React.forwardRef work with generics again.

Answer 2

I discovered this question from reading this blog post, and I think there is a more straight-forward way of accomplishing this than the current accepted answer has proposed:

First we define an interface to hold the type of the component using something called a call signature in typescript:

interface WithForwardRefType extends React.FC<WithForwardRefProps<Option>>  {
  <T extends Option>(props: WithForwardRefProps<T>): ReturnType<React.FC<WithForwardRefProps<T>>>
}

Notice how the function signature itself is declared as generic, not the interface - this is the key to making this work. The interface also extends React.FC in order to expose some useful Component properties such as displayName, defaultProps, etc.

Next we just supply that interface as the type of our component, and without having to specify the type of the props, we can pass that component to forwardRef, and the rest is history...

export const WithForwardRef: WithForwardRefType = forwardRef((
  props,
  ref?: React.Ref<HTMLDivElement>,
) => {
  const { options, onChange } = props;
  return (
    <div ref={ref}>
      {options.map((opt) => {
        return (
          <div
            onClick={() => {
              onChange(opt);
            }}
          >
            {opt.label}
          </div>
        );
      })}
    </div>
  );
});

Sandbox link here

---

References:

• https://stackoverflow.com/a/73795451/2089675

Answer 3

import React, { forwardRef, ForwardedRef } from 'react';
import {
  DeepPartial,
  FieldValues,
  FormProvider,
  SubmitHandler,
  useForm,
  Resolver,
} from 'react-hook-form';

import { yupResolver } from '@hookform/resolvers/yup';
import * as Yup from 'yup';

type GenericOnSubmit<T extends FieldValues> = (
  data: T,
  event?: React.BaseSyntheticEvent
) => void;

type FormProps<T extends FieldValues> = {
  onSubmit: SubmitHandler<T>;
  defaultValues?: DeepPartial<T>;
  children: React.ReactNode;
  schema?: Yup.ObjectSchema<Yup.AnyObject, Yup.AnyObject, Yup.AnyObject, ''>;
  ref?: ForwardedRef<HTMLFormElement>;
};

interface WithForwardRefType<T extends FieldValues>
  extends React.FC<FormProps<T>> {
  <T extends FieldValues>(props: FormProps<T>): ReturnType<
    React.FC<FormProps<T>>
  >;
}

export const Form: WithForwardRefType<FieldValues> = forwardRef<
  HTMLFormElement,
  FormProps<FieldValues>
>(
  <T extends FieldValues>(
    { onSubmit, children, defaultValues, schema }: FormProps<T>,
    refForm: ForwardedRef<HTMLFormElement>
  ): JSX.Element => {
    console.log(refForm);

    const methods = useForm<T>({
      defaultValues,
      ...(schema ? { resolver: yupResolver(schema) as Resolver<T> } : {}),
    });

    const handleSubmit = methods.handleSubmit;

    return (
      <FormProvider {...methods}>
        <form
          ref={refForm}
          onSubmit={handleSubmit(onSubmit as GenericOnSubmit<T>)}
        >
          {children}
        </form>
      </FormProvider>
    );
  }
);

This code is a TypeScript React component that provides a generic Form component with forwardRef support. Here's a breakdown of the code:

• The GenericOnSubmit type represents a function that handles form submission and takes the form data and an optional event as parameters.
• The FormProps interface defines the props for the Form component, including onSubmit (the form submission handler), defaultValues (optional initial values for form fields), children (the components rendered inside the form), schema (optional validation schema using Yup), and ref (optional forwarded ref for the form element).
• The WithForwardRefType interface extends React.FC<FormProps<T>> to define a generic functional component type that supports forwardRef. It includes a call signature that allows using the component as a function call.
• The Form component is defined using forwardRef. It takes a generic parameter T extends FieldValues to specify the type of form field values. It receives the FormProps as its props, along with the forwarded ref. Inside the component, it initializes the useForm hook with the provided options, including default values and schema if available. It also logs the ref to the console. The handleSubmit function is extracted from the methods object returned by useForm. The component renders a FormProvider component to provide the form methods and wraps the form element with the form tag. The onSubmit function is called with the correct type using a type assertion, and the children are rendered inside the form.
• Finally, the Form component is exported with the WithForwardRefType to provide the generic type and forwardRef support.

This code allows you to create a generic Form component that can be used with different types of form field values and supports forwarding the ref to the form element. It also integrates with react-hook-form and yup for form validation.