I am currently in the process of optimising a number of React SFC ponents with the use of React.memo.

Most of these ponents have children. The project also uses TypeScript.

I was starting to get the impression that memo ponents did not support children as I was presented with the following error message every time there was an error:

Property 'children' does not exist on type 'IntrinsicAttributes & object'

It turns out this only applies when I provide a Props type to the ponent. E.g.

const MyComponent: React.SFC<PropType>

If I remove the prop type (as below) then the error does not occur.

const MyComponent: React.SFC

Of course, I need the prop type in most every case.

I have setup a Code Sandbox that emulates the issue:

;hidenavigation=1&theme=dark

tl;dr: why do React.memo ponents not accept the child prop when a type has been provided for the ponent props?

I am currently in the process of optimising a number of React SFC ponents with the use of React.memo.

Most of these ponents have children. The project also uses TypeScript.

I was starting to get the impression that memo ponents did not support children as I was presented with the following error message every time there was an error:

Property 'children' does not exist on type 'IntrinsicAttributes & object'

It turns out this only applies when I provide a Props type to the ponent. E.g.

const MyComponent: React.SFC<PropType>

If I remove the prop type (as below) then the error does not occur.

const MyComponent: React.SFC

Of course, I need the prop type in most every case.

I have setup a Code Sandbox that emulates the issue:

https://codesandbox.io/s/cool-keldysh-urddu?fontsize=14&hidenavigation=1&theme=dark

tl;dr: why do React.memo ponents not accept the child prop when a type has been provided for the ponent props?

• javascript
• reactjs
• typescript
• memo

1 Answer 1

This appears to be an issue with the React.memo typings, it doesn't automatically pass through children props. There's a discussion on the DefinitelyTyped repo.

For now, you can manually specify the children prop:

type ChildProps = {
  name: string;
  children: React.ReactNode;
};