[Basic] Function Component alternative

[deadcoder0904]

What cheatsheet is this about? (if applicable)

Basic cheatsheet

What's your issue or idea?

The function component can be reduced to

function App({ message: string }) {
  return <div>{message}</div>;
}

instead of

const App: React.FunctionComponent<{ message: string }> = function App({ message }) {
  return <div>{message}</div>;
}

which is quite big & is weird syntactically at least in vanilla JS

const App = function App({ message ) {
  return <div>{message}</div>;
}

Also, would love some examples in Function Components section of What's the difference? each bullet points :)

Examples would be much better on these 2 bullet points since it makes grasping easier -

• If you need to use children property inside the function body, in the former case it has to be added explicitly. FunctionComponent already includes the correctly typed children property which then doesn't have to become part of your type.
• Typing your function explicitly will also give you typechecking and autocomplete on its static properties, like displayName, propTypes, and defaultProps

[ferdaber]

You're welcome to make a PR with those changes! I think it's a good message to send as I personally never use the FunctionComponent annotation. It wasn't even until I became involved in this project that I realized people were using it.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions!