[SOLVED] Pass Children prop to React Memo component

Pass Children prop to React Memo component

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

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

I was starting to get the impression that memo components 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 component. 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 components not accept the child prop when a type has been provided for the component props?

Solution

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;
};