Not working with forwardRef

[mrondra]

Hi,

I have a problem with forwardRef and Typescript. Example below:

const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(function headingFunction(
    props: HeadingProps,
    ref,
): ReactElement<HeadingProps, HeadingProps['tag']> | null {
    ...
});

Heading.whyDidYouRender = true;     

And I get this error:

TS2339: Property 'whyDidYouRender' does not exist on type 'ForwardRefExoticComponent  >'

Do you have any idea what to do with it?

Thank you

[vzaidman]

Ok i've found the problem.
add

/// <reference types="@welldone-software/why-did-you-render" />

to the top of wdyr.tsx. f.e.:

/// <reference types="@welldone-software/why-did-you-render" />
import React from 'react';

if (process.env.NODE_ENV === 'development') {
  const whyDidYouRender = require('@welldone-software/why-did-you-render');
  whyDidYouRender(React, {
    trackAllPureComponents: true,
  });
}

[mrondra]

Great, it works, thank you very much.

[vzaidman]

somehow, it was adding the types automatically up until now.

however, it seems like we need to add it manually in the latest typescript versions.

I'm adding a section about it in the readme.

thanks for noticing and reporting the problem!