Skip to content

Nextjs example: _app propTypes error when exporting React.memo #20473

@Izhaki

Description

@Izhaki

Using examples/nextjs, when the page exported is wrapped with React.memo it error with:

Warning: Failed prop type: Invalid prop Component of type object supplied to MyApp, expected function. in MyApp

  • The issue is present in the latest release.
  • I have searched the issues of this repository and believe that this is not a duplicate.

Steps to Reproduce 🕹

Clone the example

In pages/index.js wrap

export default function Index() { ... }

with React.memo:

export default React.memo(function Index() { ... });

Context 🔦

Note that React.memo is typed like so:

    function memo<P extends object>(
        Component: SFC<P>,
        propsAreEqual?: (prevProps: Readonly<PropsWithChildren<P>>, nextProps: Readonly<PropsWithChildren<P>>) => boolean
    ): NamedExoticComponent<P>;
    function memo<T extends ComponentType<any>>(
        Component: T,
        propsAreEqual?: (prevProps: Readonly<ComponentProps<T>>, nextProps: Readonly<ComponentProps<T>>) => boolean
    ): MemoExoticComponent<T>;

The propType in _app.js should change from:

  Component: PropTypes.func.isRequired,

To:

  Component: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,

Metadata

Metadata

Assignees

No one assigned

    Labels

    examplesRelating to /examples.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions