Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React.memo is not available when working with Typescript?

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?

like image 420
Strobe_ Avatar asked Jun 20 '26 21:06

Strobe_


1 Answers

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.

like image 54
Andrew Avatar answered Jun 23 '26 12:06

Andrew



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!