Definitelytyped: [@types/react] React.memo does not accept children

[aaronbeall]

It seems that React.memo() results in a component that won't accept JSX children:

This works, note that {children} raises no error as expected because PropsWithChildren is used in the resolved inner component parameter:

const Foo = React.memo<{ title: string }>(({ children, title }) => (
    <div title={title}>{children}</div>
));

Rendering the resulting component with no children works:

const test = <Foo title="foo" />;

Rendering with JSX children results in Error: Property 'children' does not exist on type 'IntrinsicAttributes & { title: string; }'

const test2 = (
    <Foo title="foo">
       <b>Hello</b>
    </Foo>
);

I wonder if ExoticComponent should use (props: PropsWithChildren<P>) instead of just (props: P) as it does now? It seems to fix the issue local. Is there some reason not to do that?

• [x] I tried using the @types/react package and had problems.
• [x] I tried using the latest stable version of tsc. https://www.npmjs.com/package/typescript
• [x] I have a question that is inappropriate for StackOverflow. Asked on gitter.
• [x] [Mention](https://github.com/blog/821-mention-somebody-they-re-notified) the authors (see Definitions by: in index.d.ts) so they can respond.
  
  
  
  • Authors: @johnnyreilly @bbenezech @pzavolinsky @digiguru @ericanderson @tkrotoff @DovydasNavickas @onigoetz @theruther4d @guilhermehubner @ferdaber @jrakotoharisoa @pascaloliv @hotell @franklixuefei @Jessidhia @pshrmn @threepointone @saranshkataria
  
  

[threepointone]

Please note that if you’re passing children to a .memo component, it’ll fail the props check every time, making the memoisation useless. (Since children will be a new object every time). So maybe this shouldn’t be changed?

[aaronbeall]

@threepointone Unless the children are themself memo'd (and haven't re-rendered), right?

[threepointone]

Maybe, but it seems like extra work if it’s going to be static in that fashion. Simpler then to memoise a component that already includes the children in it (which could still change for different props)

[aaronbeall]

@threepointone True, but JSX composition is a nice feature. The same argument could be made against PureComponent allowing children.

[threepointone]

You’re right, PureComponent probably shouldn’t accept children either 😅

I don’t feel strongly about this type change, just pointing out it might not be as helpful as you’d think. I do recommend you consider restructuring your code instead.

[Hotell]

I kinda agree with @aaronbeall . IMHO this should be handled by some linter, not type-system -> that you're using non memoized children within memoized component.