-
Notifications
You must be signed in to change notification settings - Fork 29.9k
/
experimental.tsx
95 lines (74 loc) · 2.44 KB
/
experimental.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
/// <reference types="../experimental"/>
import React = require('react');
function useExperimentalHooks() {
const [toggle, setToggle] = React.useState(false);
const [startTransition, done] = React.unstable_useTransition({
busyMinDurationMs: 100,
busyDelayMs: 200,
});
// $ExpectType boolean
done;
// $ExpectType boolean
const deferredToggle = React.unstable_useDeferredValue(toggle);
const [func] = React.useState(() => () => 0);
// $ExpectType () => number
func;
// $ExpectType () => number
const deferredFunc = React.unstable_useDeferredValue(func);
class Constructor {}
// $ExpectType typeof Constructor
const deferredConstructor = React.unstable_useDeferredValue(Constructor);
// $ExpectType () => string
const deferredConstructible = React.unstable_useDeferredValue(Constructible);
return () => {
startTransition(() => {
setToggle(toggle => !toggle);
});
// The function must be synchronous, even if it can start an asynchronous update
// it's no different from an useEffect callback in this respect
// $ExpectError
startTransition(async () => {});
// Unlike Effect callbacks, though, there is no possible destructor to return
// $ExpectError
startTransition(() => () => {});
};
function Constructible() {
return '';
}
}
function Dialog() {
const nameId = React.unstable_useOpaqueIdentifier();
return (
<div role="dialog" aria-labelledby={nameId}>
<h2 id={nameId}></h2>
</div>
);
}
function InvalidOpaqueIdentifierUsage() {
const id = React.unstable_useOpaqueIdentifier();
// undesired, would warn in React should not type-check
const stringified1: string = id.toString();
// undesired, would warn in React should not type-check
const stringified2: string = id + '';
return null;
}
function startTransitionTest() {
function transitionToPage(page: string) {}
React.unstable_startTransition(() => {
transitionToPage('/');
});
// $ExpectError
React.unstable_startTransition(async () => {});
}
function suspenseTest() {
function DisplayData() {
return null;
}
function FlameChart() {
return (
<React.Suspense fallback="computing..." unstable_expectedLoadTime={2000}>
<DisplayData />
</React.Suspense>
);
}
}