Definitelytyped: @types/react Cannot use React.memo with defaultProps

[user753]

This works

export const Foo = (props: {foo: number}) => {
  return <div>{props.foo}</div>
}
Foo.defaultProps = {foo: 1}

This doesn't

export const Foo = React.memo((props: {foo: number}) => {
  return <div>{props.foo}</div>
})
Foo.defaultProps = {foo: 1}

TS2339: Property 'defaultProps' does not exist on type 'MemoExoticComponent<(props: { foo: number; }) => Element>'.

Authors: @ferdaber @johnnyreilly @sandersn @RyanCavanaugh @tkrotoff @weswigham

[ferdaber]

I believe React.memo does not actually support defaultProps, only the inner component does.

[user753]

@ferdaber

export const Foo = React.memo((props: {foo: number}) => {
  return <div>{props.foo}</div>
}) as any
Foo.defaultProps = {foo: 1}
<Foo/> // render 1

[user753]

Could someone explain why MemoExoticComponent cannot just extend FunctionComponent?

[ferdaber]

Memoized components aren't actually functions, they are a special object type that React recognizes and treats as a component, so they are not actually callable. In the past, only some of the exotic components supported all of the features of function components (propTypes, displayName, or defaultProps) so they had to be separated out.

[user753]

@ferdaber It looks like these features works, so maybe it's time to change the typing?

[femiveys]

Is anyone looking into this?

[dungnguyen10989]

try it:

(Foo as React.ComponentType<Props>).defaultProps = {
    foo: '1'
};

[ali-rival]

```
type Props = {
hasProp?: boolean;
};

const MyComponent = ({ hasProp }) => (
<>
{hasProp && (

I have the prop

)}

I don't have the prop

);

MyComponent.defaultProps = {
hasProp: false
};

export default React.memo(props => );

[mikeaustin]

Any updates on how to add a property to the result of a React.memo()? I'm currently using the "as" typecast to any, but that's hacky. Example use is where both are memoized.