You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
340
340
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+.
341
341
342
-
Please use regular function components or `React.VFC` instead.
342
+
Please use regular function components or `React.FC` instead.
<summary><b>Small <code>React.ReactNode</code> edge case before React 18</b></summary>
1182
1182
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:
1184
1184
1185
1185
```tsx
1186
1186
typeProps= {
@@ -1191,16 +1191,16 @@ function Comp({ children }: Props) {
1191
1191
return <div>{children}</div>;
1192
1192
}
1193
1193
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>;
1195
1197
}
1196
1198
```
1197
1199
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.
1199
1201
1200
1202
[Thanks @pomle for raising this.](https://github.com/typescript-cheatsheets/react/issues/357)
1201
1203
1202
-
With the [React 18 type updates](https://github.com/DefinitelyTyped/DefinitelyTyped/pull/56210), `{}` is no longer allowed in `ReactFragment`.
0 commit comments