65 |
66 | ## Test scenario
67 |
68 | - With useTransition
69 | - Level 1
70 | - 1: No tearing finally on update
71 | - 2: No tearing finally on mount
72 | - Level 2
73 | - 3: No tearing temporarily on update
74 | - 4: No tearing temporarily on mount
75 | - Level 3
76 | - 5: Can interrupt render (time slicing)
77 | - 6: Can branch state (wip state)
78 | - With useDeferredValue
79 | - Level 1
80 | - 7: No tearing finally on update
81 | - 8: No tearing finally on mount
82 | - Level 2
83 | - 9: No tearing temporarily on update
84 | - 10: No tearing temporarily on mount
85 |
86 | ## Results
87 |
88 | {count}
;
75 | });
76 |
77 | const DeferredCounter = componentWrapper(() => {
78 | const count = useDeferredValue(useCount());
79 | syncBlock();
80 | return {count}
;
81 | });
82 |
83 | const Main = () => {
84 | const [isPending, startTransition] = useTransition();
85 | const [mode, setMode] = useState(null);
86 | const transitionHide = () => {
87 | startTransition(() => setMode(null));
88 | };
89 | const transitionShowCounter = () => {
90 | startTransition(() => setMode('counter'));
91 | };
92 | const transitionShowDeferred = () => {
93 | startTransition(() => setMode('deferred'));
94 | };
95 | const count = useCount();
96 | const deferredCount = useDeferredValue(count);
97 | useCheckTearing();
98 | const increment = useIncrement();
99 | const doDouble = useDouble();
100 | const transitionIncrement = () => {
101 | startTransition(increment);
102 | };
103 | const timer = useRef();
104 | const stopAutoIncrement = () => {
105 | clearInterval(timer.current);
106 | };
107 | const startAutoIncrement = () => {
108 | stopAutoIncrement();
109 | timer.current = setInterval(increment, 50);
110 | };
111 | return (
112 |
113 |
116 |
119 |
122 |
125 |
128 |
131 |
134 |
137 | {isPending && 'Pending...'}
138 |
144 | );
145 | };
146 |
147 | const App = () => (
148 | Counters
139 | {mode === 'counter' && ids.map((id) =>Main
142 |{mode === 'deferred' ? deferredCount : count}
143 | | Test | ${Array.from(Array(numTests).keys()).map((i) => `${i + 1} | `).join('')}
|---|
([\s\S]*?)<\/details>/,
79 | `
\n
`,
80 | );
81 |
82 | fs.writeFileSync('./README.md', readme);
83 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const webpack = require('webpack');
3 | const HtmlWebpackPlugin = require('html-webpack-plugin');
4 |
5 | module.exports = {
6 | mode: 'production',
7 | entry: './src/index.js',
8 | output: {
9 | path: path.join(__dirname, 'dist', process.env.NAME || 'react-redux'),
10 | filename: '[name].js',
11 | },
12 | plugins: [
13 | new webpack.DefinePlugin({
14 | __DEV__: JSON.stringify(process.env.NODE_ENV !== 'production'),
15 | }),
16 | new webpack.EnvironmentPlugin({
17 | NAME: '',
18 | }),
19 | new HtmlWebpackPlugin({
20 | template: './public/index.html',
21 | }),
22 | ],
23 | module: {
24 | rules: [{
25 | test: /\.jsx?$/,
26 | resolve: {
27 | fullySpecified: false,
28 | },
29 | exclude: /node_modules\/(?!(@apollo)\/).*/,
30 | use: [{
31 | loader: 'babel-loader',
32 | options: {
33 | presets: [
34 | ['@babel/preset-env', { modules: false }],
35 | '@babel/preset-react',
36 | ],
37 | },
38 | }],
39 | }],
40 | },
41 | devServer: {
42 | port: process.env.PORT || '8080',
43 | historyApiFallback: true,
44 | },
45 | };
46 |
--------------------------------------------------------------------------------