Skip to content

Commit ef5f8d1

Browse files
address React.FC and React.FunctionComponent equality
closes typescript-cheatsheets/react#190
1 parent 70cd33a commit ef5f8d1

File tree

1 file changed

+7
-6
lines changed

1 file changed

+7
-6
lines changed

Diff for: README.md

+7-6
Original file line numberDiff line numberDiff line change
@@ -165,17 +165,20 @@ const App = ({ message }: AppProps) => <div>{message}</div>;
165165

166166
<summary><b>What about `React.FC`/`React.FunctionComponent`?</b></summary>
167167

168-
You can also write components with `React.FunctionComponent` (or the shorthand `React.FC`):
168+
You can also write components with `React.FunctionComponent` (or the shorthand `React.FC` - they are the same):
169169

170170
```tsx
171-
const App: React.FC<{ message: string }> = ({ message }) => (
171+
const App: React.FunctionComponent<{ message: string }> = ({ message }) => (
172172
<div>{message}</div>
173173
);
174174
```
175175

176176
Some differences from the "normal function" version:
177177

178-
- It provides typechecking and autocomplete for static properties like `displayName`, `propTypes`, and `defaultProps` - **However**, there are currently known issues using `defaultProps` with `React.FunctionComponent`. See [this issue for details](https://github.com/typescript-cheatsheets/react-typescript-cheatsheet/issues/87) - scroll down to our `defaultProps` section for typing recommendations there.
178+
- `React.FunctionComponent` is explicit about the return type, while the normal function version is implicit (or else needs additional annotation).
179+
180+
- It provides typechecking and autocomplete for static properties like `displayName`, `propTypes`, and `defaultProps`.
181+
- Note that there are some known issues using `defaultProps` with `React.FunctionComponent`. See [this issue for details](https://github.com/typescript-cheatsheets/react-typescript-cheatsheet/issues/87). We maintain a separate `defaultProps` section you can also look up.
179182

180183
- It provides an implicit definition of `children` (see below) - however there are some issues with the implicit `children` type (e.g. [DefinitelyTyped#33006](https://github.com/DefinitelyTyped/DefinitelyTyped/issues/33006)), and it might considered better style to be explicit about components that consume `children`, anyway.
181184

@@ -188,9 +191,7 @@ const Title: React.FunctionComponent<{ title: string }> = ({
188191

189192
- _In the future_, it may automatically mark props as `readonly`, though that's a moot point if the props object is destructured in the parameter list.
190193

191-
- `React.FunctionComponent` is explicit about the return type, while the normal function version is implicit (or else needs additional annotation).
192-
193-
In most cases it makes very little difference which syntax is used, but the `React.FC` syntax is slightly more verbose without providing clear advantage, so precedence was given to the "normal function" syntax.
194+
In most cases it makes very little difference which syntax is used, but you may prefer the more explicit nature of `React.FunctionComponent`.
194195

195196
</details>
196197

0 commit comments

Comments
 (0)