react icon indicating copy to clipboard operation
react copied to clipboard

[Basic] Provide some docs on `memo`

Open silverwind opened this issue 1 year ago • 1 comments

What cheatsheet is this about? (if applicable)

Basic cheatsheet

What's your issue or idea?

Some docs on memo would be useful.

For example it took me a while to understand that such a combination of memo and forwardRef is wrong (the resulting type would not include ref):

const Div = memo<Props>(forwardRef<HTMLDivElement, Props>(function Div(props, ref) => {
  return <div ref={ref}/>;
}));

The correct way is to omit <Props> on memo if there is forwardRef inside it, so my suggestions are:

const Div = memo(forwardRef<HTMLDivElement, Props>(function Div((props, ref) => {
  return <div ref={ref}/>;
}));
const Div = memo<Props>(function Div(props => {
  return <div/>;
});

silverwind avatar Jun 26 '24 16:06 silverwind

Sounds like it could be useful. Feel free to contribute!

filiptammergard avatar Jul 12 '24 18:07 filiptammergard

Assign me this issues

UdaySharmaGitHub avatar Sep 30 '24 17:09 UdaySharmaGitHub

Assign me this issues

Just create a PR if you want to contribute

filiptammergard avatar Sep 30 '24 19:09 filiptammergard

@filiptammergard i just contributed the Memo and Memoization in React with TypeScript. and raised the PR.

UdaySharmaGitHub avatar Oct 01 '24 07:10 UdaySharmaGitHub

@filiptammergard I've raised the PR, please do check

ripu2 avatar Oct 01 '24 18:10 ripu2

I realize that React.memo is not specific to React+TypeScript, so it's better to just look in the official React docs. In this project we only document things that are directly related to how to use TypeScript with React. Thanks for suggestion though!

filiptammergard avatar Oct 01 '24 19:10 filiptammergard