Ad

React.memo Is Not Available When Working With Typescript?

- 1 answer

I'm trying to use React.memo like so:

const Node: React.memo<Props> = props => {

But i'm getting an error saying:

Namespace '../ui/node_modules/@types/react/index.d.ts"' has no exported member 'memo'.

But I can see the Memo function within index.d.ts:

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

What am I missing here?

Ad

Answer

As mentioned in the comments, memo is not a type declaration. You have your syntax messed up a little bit

const Node: React.FC<Props> = React.memo(props => {
  return(
      <div>
        memoized
      </div>
  )
})

Note that React.FC is a declaration of a functional component. Since you're wrapping it in a memo, you might need to change the type. But personally, I have not needed to.

Ad
source: stackoverflow.com
Ad