Skip to content

Commit

Permalink
add React.FC example with predefined type
Browse files Browse the repository at this point in the history
To show a fair comparison between the different approaches on how to type a react component in a readable way, the React.FC<AppProps> approach should be also listed. It may be technically similar but has the best readability from my experience. (left to right instead right to left)
  • Loading branch information
mtrenker authored May 27, 2024
1 parent 09217c9 commit 309d65a
Showing 1 changed file with 4 additions and 0 deletions.
4 changes: 4 additions & 0 deletions docs/basic/getting-started/function-components.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,10 @@ const App = ({ message }: { message: string }) => <div>{message}</div>;
const App: React.FunctionComponent<{ message: string }> = ({ message }) => (
<div>{message}</div>
);
// or
const App: React.FC<AppProps> = ({ message }) => (
<div>{message}</div>
);
```

> Tip: You might use [Paul Shen's VS Code Extension](https://marketplace.visualstudio.com/items?itemName=paulshen.paul-typescript-toolkit) to automate the type destructure declaration (incl a [keyboard shortcut](https://twitter.com/_paulshen/status/1392915279466745857?s=20)).
Expand Down

0 comments on commit 309d65a

Please sign in to comment.