Added interaction tracing test harness to shell
Brian Vaughn committed
Mar 24, 2019 at 09:21 UTC
5602fc537104e11a065dd264dd400ee01889fe0b
3 files changed
+81
-30
shells/dev/app/InteractionTracing/index.js
new
+58
@@ -0,0 +1,58 @@
1
+// @flow
2
+
3
+import React, { Fragment, useCallback, useEffect, useState } from 'react';
4
+import { unstable_batchedUpdates as batchedUpdates } from 'react-dom';
5
+import {
6
+ unstable_trace as trace,
7
+ unstable_wrap as wrap,
8
+} from 'scheduler/tracing';
9
+
10
+export default function InteractionTracing() {
11
+ const [count, setCount] = useState(0);
12
+ const [shouldCascade, setShouldCascade] = useState(false);
13
+
14
+ const handleUpdate = useCallback(() => {
15
+ trace('count', performance.now(), () => {
16
+ setTimeout(
17
+ wrap(() => {
18
+ setCount(count + 1);
19
+ }),
20
+ count * 100
21
+ );
22
+ });
23
+ }, [count]);
24
+ const handleCascadingUpdate = useCallback(() => {
25
+ trace('cascade', performance.now(), () => {
26
+ setTimeout(
27
+ wrap(() => {
28
+ batchedUpdates(() => {
29
+ setCount(count + 1);
30
+ setShouldCascade(true);
31
+ });
32
+ }),
33
+ count * 100
34
+ );
35
+ });
36
+ }, [count]);
37
+
38
+ useEffect(() => {
39
+ if (shouldCascade) {
40
+ setTimeout(
41
+ wrap(() => {
42
+ setShouldCascade(false);
43
+ }),
44
+ count * 100
45
+ );
46
+ }
47
+ }, [count, shouldCascade]);
48
+
49
+ return (
50
+ <Fragment>
51
+ <h1>Interaction Tracing</h1>
52
+ <button onClick={handleUpdate}>Update ({count})</button>
53
+ <button onClick={handleCascadingUpdate}>
54
+ Cascading Update ({count}, {shouldCascade ? 'true' : 'false'})
55
+ </button>
56
+ </Fragment>
57
+ );
58
+}
shells/dev/app/ToDoList/List.js
+21
-30
@@ -1,7 +1,6 @@
1
// @flow
2
3
import React, { Fragment, useCallback, useState } from 'react';
4
-import { unstable_trace as trace } from 'scheduler/tracing';
4
import ListItem from './ListItem';
5
import styles from './List.css';
6
@@ -24,18 +23,16 @@ export default function List(props: Props) {
23
24
const handleClick = useCallback(() => {
25
if (newItemText !== '') {
27
- trace(`Add "${newItemText}"`, performance.now(), () => {
28
- setItems([
29
- ...items,
30
- {
31
- id: uid,
32
- isComplete: false,
33
- text: newItemText,
34
- },
35
- ]);
36
- setUID(uid + 1);
37
- setNewItemText('');
38
- });
26
+ setItems([
27
+ ...items,
28
+ {
29
+ id: uid,
30
+ isComplete: false,
31
+ text: newItemText,
32
+ },
33
+ ]);
34
+ setUID(uid + 1);
35
+ setNewItemText('');
36
}
37
}, [newItemText, items, uid]);
38
@@ -56,29 +53,23 @@ export default function List(props: Props) {
53
);
54
55
const removeItem = useCallback(
59
- itemToRemove => {
60
- trace(`Remove "${itemToRemove.text}"`, performance.now(), () => {
61
- setItems(items.filter(item => item !== itemToRemove));
62
- });
63
- },
56
+ itemToRemove => setItems(items.filter(item => item !== itemToRemove)),
57
[items]
58
);
59
60
const toggleItem = useCallback(
61
itemToToggle => {
69
- trace(`Toggle "${itemToToggle.text}"`, performance.now(), () => {
70
- const index = items.indexOf(itemToToggle);
62
+ const index = items.indexOf(itemToToggle);
63
72
- setItems(
73
- items
74
- .slice(0, index)
75
- .concat({
76
- ...itemToToggle,
77
- isComplete: !itemToToggle.isComplete,
78
- })
79
- .concat(items.slice(index + 1))
80
- );
81
- });
64
+ setItems(
65
+ items
66
+ .slice(0, index)
67
+ .concat({
68
+ ...itemToToggle,
69
+ isComplete: !itemToToggle.isComplete,
70
+ })
71
+ .concat(items.slice(index + 1))
72
+ );
73
},
74
[items]
75
);
shells/dev/app/index.js
+2
@@ -8,6 +8,7 @@ import DeeplyNestedComponents from './DeeplyNestedComponents';
8
import EditableProps from './EditableProps';
9
import ElementTypes from './ElementTypes';
10
import InspectableElements from './InspectableElements';
11
+import InteractionTracing from './InteractionTracing';
12
import ToDoList from './ToDoList';
13
14
import './styles.css';
@@ -26,6 +27,7 @@ function mountHelper(App) {
27
28
function mountTestApp() {
29
mountHelper(ToDoList);
30
+ mountHelper(InteractionTracing);
31
mountHelper(InspectableElements);
32
mountHelper(ElementTypes);
33
mountHelper(EditableProps);