Typescript generic class equivalent for React.memo

Question

Is there any way to set new generic in React.memo?

For example, for class components, I can use

// set generic
class GenericClass<G extends string | number> extends PureComponent {}

// and use like this
<GenericClass<number> />

In the below scenario, I want to make type G generic.

type G = string;
const MemoComponent = memo<{ value: G; onValueChange: (newValue: G) => void }>(
  ({ value, onValueChange }) => {
    return (
      <select
        onClick={() => {
          // do calculation
          onValueChange(value);
        }}
      >
        Button
      </button>
    );
  }
);

I want to know is there any way to set generic in React.memo too? For example, like below

const MemoComponent = <G extends string | number | object>React.memo<{value: G}>(({value}) => component)

// and use like this
<MemoComponent<number> />

Can you add more code? Show what you have tried? What is the final thing you expect out of the memoized component? — Mukesh Soni, Aug 13 '19 at 12:11
Related: https://stackoverflow.com/questions/60386614/how-to-use-props-with-generics-with-react-memo/60389122#60389122 — ford04, Mar 29 '21 at 09:35

Rafael Fontes · Answer 1 · 2020-02-23T15:29:47.747

71

I had the same issue and solved like this.

    interface ISomeComponentWithGenericsProps<T> { value: T; } 

    function SomeComponentWithGenerics<T>(props: ISomeComponentWithGenericsProps<T>) {
      return <span>{props.value}</span>;
    }

    export default React.memo(SomeComponentWithGenerics) as typeof SomeComponentWithGenerics;

edited Feb 23 '20 at 15:29

answered Feb 11 '20 at 13:51

Rafael Fontes

1,195
11
19

This is possible. As `useMemo` and `React.memo` have different use cases and behavior. Tried and worked. Thanks! – Michael Harley Feb 22 '20 at 14:29
1

This saved my life. By far the simplest solution I've seen thanks. FU Typescript. – Dominic Feb 25 '20 at 03:00
Thanks for the simple answer! Although you lose the ability to see it is an ExoticComponent, that doesn't really seem to matter as the interface should be the same anyway in actual implementation. – Makarray Feb 25 '20 at 20:56
Thanks for this answer! – Sébastien Loix May 07 '20 at 09:36
Thank you! Adding `as typeof XXX` worked like a charm. – FibreChips Sep 01 '21 at 16:25

score 25 · Answer 2 · answered Jan 28 '22 at 07:19

25

You can write your own wrapper not to use type assertion(as) :

const genericMemo: <T>(component: T) => T = memo

function GenericComponent<Value>({props: PropsWithGeneric<Value>}) {
  return <div />
}

export const GenericMemoComponent = genericMemo(GenericComponent)

answered Jan 28 '22 at 07:19

Dmitriy Vergiles

251
3
2

1

Perfect answer, it's helped me thx :) – Black Plum Mar 07 '22 at 09:31
2

This is drastically preferred over the higher-rated answer, as using type assertions is rarely a good idea. Thank you Dmitriy Vergiles. – SaltedBlowfish Jan 12 '23 at 19:19

Turnip · Answer 3 · 2023-07-18T00:50:15.897

Expanding on Dmitriy Vergiles' answer - to include the propsAreEqual equality function:

const genericMemo: <T>(
  component: T,
  propsAreEqual?: (
    prevProps: React.PropsWithChildren<T>,
    nextProps: React.PropsWithChildren<T>
  ) => boolean
) => T = memo;

function GenericComponent<Value>({props: PropsWithGeneric<Value>}) {
  return <div />
}

export const GenericMemoComponent = genericMemo(
  GenericComponent, 
  (prevProps, nextProps) => {
    // Check props
  }
)

Typescript generic class equivalent for React.memo

3 Answers3

Linked