Skip to content

Commit adbefd5

Browse files
Updated README on 2022-06-04T10:27:13.077Z
1 parent 76fccdb commit adbefd5

File tree

1 file changed

+7
-7
lines changed

1 file changed

+7
-7
lines changed

README.md

+7-7
Original file line numberDiff line numberDiff line change
@@ -339,7 +339,7 @@ const Title: React.FunctionComponent<{ title: string }> = ({
339339
In [@types/react 16.9.48](https://github.com/DefinitelyTyped/DefinitelyTyped/pull/46643), the `React.VoidFunctionComponent` or `React.VFC` type was added for typing `children` explicitly.
340340
However, please be aware that `React.VFC` and `React.VoidFunctionComponent` were deprecated in React 18 (https://github.com/DefinitelyTyped/DefinitelyTyped/pull/59882), so this interim solution is no longer necessary or recommended in React 18+.
341341

342-
Please use regular function components or `React.VFC` instead.
342+
Please use regular function components or `React.FC` instead.
343343

344344
```ts
345345
type Props = { foo: string };
@@ -1178,9 +1178,9 @@ export declare interface AppProps {
11781178
```
11791179

11801180
<details>
1181-
<summary><b>Small <code>React.ReactNode</code> edge case</b></summary>
1181+
<summary><b>Small <code>React.ReactNode</code> edge case before React 18</b></summary>
11821182

1183-
This code typechecks but has a runtime error:
1183+
Before the [React 18 type updates](https://github.com/DefinitelyTyped/DefinitelyTyped/pull/56210), this code typechecked but had a runtime error:
11841184

11851185
```tsx
11861186
type Props = {
@@ -1191,16 +1191,16 @@ function Comp({ children }: Props) {
11911191
return <div>{children}</div>;
11921192
}
11931193
function App() {
1194-
return <Comp>{{}}</Comp>; // Runtime Error: Objects not valid as React Child!
1194+
// Before React 18: Runtime error "Objects are not valid as a React child"
1195+
// After React 18: Typecheck error "Type '{}' is not assignable to type 'ReactNode'"
1196+
return <Comp>{{}}</Comp>;
11951197
}
11961198
```
11971199

1198-
This is because `ReactNode` includes `ReactFragment` which allows a `{}` type, which is [too wide](https://github.com/DefinitelyTyped/DefinitelyTyped/issues/37596#issue-480260937). Fixing this would break a lot of libraries, so for now you just have to be mindful that `ReactNode` is not absolutely bulletproof.
1200+
This is because `ReactNode` includes `ReactFragment` which allowed type `{}` before React 18.
11991201

12001202
[Thanks @pomle for raising this.](https://github.com/typescript-cheatsheets/react/issues/357)
12011203

1202-
With the [React 18 type updates](https://github.com/DefinitelyTyped/DefinitelyTyped/pull/56210), `{}` is no longer allowed in `ReactFragment`.
1203-
12041204
</details>
12051205

12061206
<details>

0 commit comments

Comments
 (0)