document new VoidFunctionComponent type (#269)

* document new VoidFunctionComponent type

closes #268

* Update docs/basic/getting-started/function-components.md

Co-authored-by: Sebastian Silbermann <silbermann.sebastian@gmail.com>

* Update function-components.md

* Update docs/basic/getting-started/function-components.md

Co-authored-by: Sebastian Silbermann <silbermann.sebastian@gmail.com>

* Update function-components.md

* fix format

Co-authored-by: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Co-authored-by: swyx <wanshawn@amazon.com>

Author: 3 people

docs/basic/getting-started/function-components.md

@@ -12,7 +12,7 @@ const App = ({ message }: AppProps) => <div>{message}</div>;
 
 <details>
 
-<summary><b>What about `React.FC`/`React.FunctionComponent`?</b></summary>
+<summary><b>What about `React.FC`/`React.FunctionComponent`/`React.VoidFunctionComponent`?</b></summary>
 
 You can also write components with `React.FunctionComponent` (or the shorthand `React.FC` - they are the same):
 
@@ -39,6 +39,44 @@ const Title: React.FunctionComponent<{ title: string }> = ({
 }) => <div title={title}>{children}</div>;
 ```
 
+<details>
+<summary>
+
+As of [@types/react PR #46643](https://github.com/DefinitelyTyped/DefinitelyTyped/pull/46643) (TODO: update with @types/react version when merged), you can use a new `React.VoidFunctionComponent` or `React.VFC` type if you wish to declare the accepted `children` explicitly. This is an interim solution until FunctionComponent will accept no children by default (planned for React 18).
+
+</summary>
+
+```ts
+type Props = { foo: string };
+
+// OK now, in future, error
+const FunctionComponent: React.FunctionComponent<Props> = ({
+  foo,
+  children,
+}: Props) => {
+  return (
+    <div>
+      {foo} {children}
+    </div>
+  ); // OK
+};
+
+// Error now, in future, deprecated
+const VoidFunctionComponent: React.VoidFunctionComponent<Props> = ({
+  foo,
+  children,
+}) => {
+  return (
+    <div>
+      {foo}
+      {children}
+    </div>
+  );
+};
+```
+
+</details>
+
 - _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.
 
 In most cases it makes very little difference which syntax is used, but you may prefer the more explicit nature of `React.FunctionComponent`.